一、搭建框架
框架搭建我选择的是vite搭建vue3框架,搭建方法可参考:从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境 (juejin.cn)
二、遇到的问题
1、挂载
vue2可以通过以下方式引入Vue
import Vue from 'vue';
vue3中不再支持直接引入vue,其提供了新的API(createAPP)
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
2、路由
路由的使用方式发生了改变,vue2:
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const home= (resolve) => {
import('@/views/home/home.vue').then((module) => {
resolve(module);
});
};
Router.prototype.urlMap = new Map();
const router = new Router({
routes: [
{
path: '/',
component: home,
beforeEnter: (to, from, next) => {
}
}
]
})
export default router;
vue3使用了vue-router提供的API(createRouter和createWebHashHistory):
// 使用
import {
createRouter,
createWebHashHistory
} from 'vue-router'
import Home from '@/views/home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
// 在main.js中挂载
import router from './router/index'
createApp(App).use(router)
3、window.eventBus
vue3中不再支持window.eventBus,如果想继续使用window.eventBus相关方法,需要引入可以通过引入mitt插件实现
npm i mitt --save
import mitt from 'mitt'
window.eventBus = mitt();
4、babel-polyfill插件
在vue2中使用babel-polyfill插件实现语法转换,vue3中可使用vite-babel-plugin来替换
npm i vite-babel-plugin
// vite.config.js中
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到,则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'
import babel from "vite-babel-plugin";
export default defineConfig({
plugins: [
vue(),
babel()
],
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
}
},
base: './', // 设置打包路径
server: {
port: 9001, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true // 允许跨域
}
})
5、filter
vue3中不再支持filter,官方给出的解决方案是使用computed来替换
6、muse-ui
muse-ui是基于vue2来实现的,升级之后暂没找到可以引入的方案,我是把使用的组件替换了