javascript|说一说实战项目升级从vue2到vue3 之main.js 区别前端|vue.js

相信很多人都对尤大口中的vue3蠢蠢欲动许久了，但是很多人就是一头雾水没法下手，不知道改怎么搞，或者怕项目升级报错什么的。
【javascript|说一说实战项目升级从vue2到vue3 之main.js 区别】我自己的成功的把项目进行升级了，所以想简单记录一下。
简而言之首先就是版本嘛
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"

关于main.js

vue2 写法：

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");