说一说实战项目升级从vue2到vue3 之main.js 区别

相信很多人都对尤大口中的vue3蠢蠢欲动许久了，但是很多人就是一头雾水没法下手，不知道改怎么搞，或者怕项目升级报错什么的。

我自己的成功的把项目进行升级了，所以想简单记录一下。

简而言之首先就是版本嘛

vue3 vue-cli 4.x.x vue-router 4.x.x vuex 4.x.x

总体来说vue3的相关配置什么的和vue2没啥区别 就升级一下版本几乎就兼容vue3了，包括config的配置、webpack配置等等。

其实很多人最主要的是想知道项目怎么入手，架子一般搭建不会出现啥问题，vue2升级之后相应的版本升级就可以直接用了，不用太过于担心，有什么问题也有答案，关于架子，后续有时间单独写一篇。

此片作为例子的是两个项目

vue2 "vue": "^2.6.11","vue-router": "^3.2.0","vuex": "^3.6.2"
vue3 "vue": "^3.0.0","vue-router": "^4.0.0-0","vuex": "^4.0.0-0"

import 'ant-design-vue/dist/antd.less';
import Vue from 'vue'
import http from 'axios'
import App from './App.vue'
import router from './router'
//按需引入
import Antd from './ant-design-components'
//直接引入
import Antd from 'ant-design-vue'
import VueCookies from 'vue-cookies'

Vue.use(Antd)
Vue.use(draggable)
Vue.use(VueCookies)
Vue.config.productionTip = false
Vue.prototype.$cookies = VueCookies
Vue.prototype.$http = http

//因为这个项目的脚手架用的cli4.x.x 所以挂在的时候写法和cli2.x.x有所不同
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

//cli2.x.x
//new Vue({
//  el: '#app',
//  template: '',
//  components: { App }
//})

vue3写法

import 'ant-design-vue/dist/antd.less';
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import table from '@tophant/ant-table-v3-lib'
import '@tophant/ant-table-v3-lib/dist/style.css'
import Antd from 'ant-design-vue'


const app = createApp(App)
app.use(store)
app.use(router)
app.use(table)
app.use(Antd)
app.mount("#app");