vue3框架搭建以及项目升级

一、搭建框架

框架搭建我选择的是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来实现的，升级之后暂没找到可以引入的方案，我是把使用的组件替换了