vue3中mian.js中的写法——vue2和vue3基本写法对比第一篇

vue2.0写法

import Vue from "vue"  // 引入vue实例
 
import router from "./router"  // 引入路由

Vue.prototype.名字  // 定义全局变量

Vue.use(插件名)   // 使用插件

Vue.component("组件名",组件变量) // 全局组件

new Vue(

　　{

　　　　router,  // 路由挂载

　　　　render: h => h(App)

　　}

).$mount('#app')  // app的挂载

 

vue3.0写法

import { createApp } from 'vue' ; 

import router from "./router"  // 引入路由

const app = createApp(App)   // 引入vue实例

app.config.globalProperties.名字 // 定义全局变量

app.use(插件名) // 使用插件

app.component('组件名',组件变量) // 全局组件

app.use(router) // 路由的挂载

app.mount("#app") // app的挂载

(或 app.use(router).mount("#app") // 类似jq的链式调用)

 

对比：

实例引入从 import Vue from 'vue'  变成  import { createApp } from 'vue' ; const app = createApp(App)

全局变量从 Vue.prototype.名字  变成  app.config.globalProperties.名字 

插件使用从 Vue.use(插件名 )  变成  app.use(插件名)

全局组件从 Vue.component('组件名',组件变量)   变成  app.component('组件名',组件变量)

挂载的方式从 new Vue({router,render: h => h(App)}).$mount('#app')  变成  app.use(router).mount('#app')  或  app.use(router) ; app.mount('#app)

 

作者：博客园-DDjans，转载时请注明来源。

(请勿将文章用在任何商业用途，违者将承担相应法律责任)