vue3框架搭建以及项目升级

本文介绍了将Vue2项目迁移到Vue3的过程中遇到的关键变化,包括创建应用的方式(createApp)、路由的配置(vue-router)、事件总线(eventBus)、polyfill替换(vite-babel-plugin)以及过滤器(filter)的替代方案。同时,文章提到了muse-ui在Vue3中不可用的情况,并分享了相应的解决策略。
摘要由CSDN通过智能技术生成

一、搭建框架

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值