“ 与时俱进，把最新的技术收入囊中”
通过参考官方文档以及console信息，已经顺利将本站的前端架构从Vue2.x升级到最新的Vue3.x。现整理出本站在迁移过程中的一些主要修改点如下：
额外安装的library devServer配置的修改 实例创建语法修改 Vue全局属性访问修改 VueRouter移除了通配符(*)路由 路由动画过渡语法修改 v-model和value不能同时出现
01
—
额外安装的library
Vue3.x需要另安装一个新的库 @vue/compiler-sfc，通过npm安装即可
cnpm install @vue/compiler-sfc --save02
—
devServer配置的修改
本站使用的Webpack是最新的5.x版本，其中对devServer的目录配置有一处改动。改动前：
devServer: {contentBase: path.join(__dirname, '.')}
改动后：
devServer: {static: {directory: path.join(__dirname, '.')}}
03
—
实例创建语法修改
Vue2.x创建实例使用的语法是：
new Vue({...})new VueRouter({...})new VueI18n({...})
Vue3.x变为：
import { createApp } from 'vue'import { createRouter } from 'vue-router'const router = createRouter({...})const app = createApp(SomeComponent)app.use(router)app.mount('#app')
04
—
Vue全局属性访问修改
Vue2.x可以在Vue的prototype上直接创建全局属性，例如：
import axios from 'axios'Vue.prototype.$axios = axios
Vue3.x变为：
const app = createApp({...})app.config.globalProperties.$axios = axios
05
—
VueRouter移除了通配符(*)路由
之前版本的VueRouter可以配置通配符路由用于最后的匹配。例如：
const routes = [{path: '*',redirect: '/404'}]
最新的VueRouter须使用正则表达式来定义路由：
const routes = [{path: '/:pathMatch(.*)*',redirect: '/404'}]
06
—
路由动画过渡语法修改
之前版本通常是在<router-view>外面增加<transition>实现路由子组件的动画效果。例如：
<transition name="router-fade"><router-view></router-view></transition>
最新的语法要求将<transition>通过v-slot API在<router-view>内部使用：
<router-view v-slot="{ Component }"><transition name="router-fade"><component :is="Component"/></transition></router-view>
07
—
v-model和value不能同时出现
Vue2.x是允许在一个元素上同时指定v-model和value，从效果上看value的值将被忽略。例如：
<input type="text" v-model="username" value="mendel">Vue3.x对于这个情况将直接抛出Error：
VueCompilerError:Unnecessary value binding used alongside v-model.It will interfere with v-model's behavior.
对于这种情况，删除掉value即可。正常情况下，如果有v-model绑定了就不需要再定义value了。
点击“阅读原文”即可访问本站 https://mengchen.cc