Vue2升级Vue3指南

1. 查看自己项目的Vue cli版本号

对应的应该是@vue/cli 5.x 版本

js 复制代码
vue -V

2. 升级Vue cli 版本

js 复制代码
npm i -g @vue/cli

3. 删除项目中的node_modules文件夹

4. 升级脚手架的依赖

4.1 升级vue-cli

js 复制代码
vue upgrade

安装之后,vue-cli已经升级成功,且在package.json文件中已经更新

4.2 升级eslint、babel

因为@vue-clieslint babel插件等不匹配,需要下载对应版本的插件:

安装命令:

js 复制代码
npm i @vue/cli-plugin-eslint@^5.0.8 -S
npm i @vue/cli-plugin-cli-plugin-babel@^5.0.8 -S

如果安装失败,可增加--legacy-peer-deps参数

js 复制代码
npm i @vue/cli-plugin-eslint@^5.0.8 -S --legacy-peer-deps
npm i @vue/cli-plugin-cli-plugin-babel@^5.0.8 -S --legacy-peer-deps

5. 更改package.json文件中的vue版本

package.json 里,将 vue 更新到 3.1.0

6. 为了确保项目的依赖为最新的,需要删除项目中的node_modules文件夹

7. 安装相同版本的 @vue/compat

7.1 安装

js 复制代码
npm install @vue/compat@^3.1.0

安装时如果发现vue版本有冲突,可以npm命令后添加--legacy-peer-deps参数来安装。

js 复制代码
npm install @vue/compat@^3.1.0 --legacy-peer-deps

安装成功后 vue-template-compiler 会替换成@vue/compiler-sfc

7.2 设置别名

vue.config.js中为vue设置别名@vue/compat

js 复制代码
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('vue', '@vue/compat')
  },
};

8. 再次安装项目的依赖

可以将node_modules文件夹删除后再次执行npm install命令

9. 根据报错去解决问题

执行npm run serve运行项目后,会有很多报错,可以根据不同的报错完成项目迁移。

9.1 TypeError: transpileDependencies.map is not a function

原因:旧版本的npm中,transpileDependencies是一个字符串数组,新版本的npm中,transpileDependencies被改成了一个对象,并且需求mpa()方法来处理。因此,在较新版本的npm中使用旧版本的配置方式,会导致transpileDependencies.map不是一个函数的错误,

解决:在vue.config.js中,添加配置transpileDependencies: []即可。

json 复制代码
module.exports = {
  transpileDependencies: [],
};

9.2 css深度选择器写法更改

::v-deep>>>/deep/都改成:deep()

9.3 @vue/cli从4.0升级到5.0后缺失polyfills

9.3.1 执行安装命令
js 复制代码
npm install node-polyfill-webpack-plugin

若安装失败,可以npm命令后添加--legacy-peer-deps参数来安装

9.3.2 进行vue.config.js配置
json 复制代码
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()]
  },
};

默认情况下,@vue/cli从4.0升级到5.0后,process不会默认填充,需要使用的话,需要增加additionalAliases属性:

json 复制代码
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [
        new NodePolyfillPlugin({
            additionalAliases: ['process'],
        })
    ]
  },
};

9.4 ERROR ESlint is not a constructor

json 复制代码
module.exports = {
  lintOnSave: false,// 关闭语法检查
};

9.5 eslint与@vue/cli-plugin-eslint不匹配

直接通过下载包的方式解决eslint 、 babel-eslint 、@vue/cli-plugin-eslint不匹配问题

js 复制代码
npm install eslint babel-eslint @vue/cli-plugin-eslint --save-dev legacy-peer-deps

如果安装失败,可以先删掉node_modules目录和package-lock.json文件

或者卸载对应插件

js 复制代码
npm uninstall eslint eslint-plugin-vue @vue/cli-plugin-eslint

删除对应配置:

9.5 crpto.js升级

卸载crypto包,安装crypto-es包:

10. 将vue-router、vuex升级为v4

10.1 下载

js 复制代码
npm install vue-router@4 vuex@4 --save

10.2 修改mains.js注册方式

vue2

js 复制代码
import Vue from "vue";
import router from "./router";
import store from './store';

 new Vue({
   render: (h) => h(App),
   router,
   store
}).$mount("#app");
js 复制代码
import Vue, { createApp } from "vue";
import router from './router';
import store from './store';

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

10.3 router.js修改

vue2

js 复制代码
 import Vue from "vue";
 import Router from "vue-router";

 Vue.use(Router);
 export default new Router({
   mode: "hash",
   scrollBehavior: () => ({
     y: 0
   }),
   routes: constantRouterMap
});

vue3

js 复制代码
import { createRouter, createWebHashHistory } from 'vue-router';

export default createRouter({
  history: createWebHashHistory(),
  routes: constantRouterMap
});

10.4 vuex修改

vue2

js 复制代码
const store = new Vuex.Store({
   modules: {
     user,
     baseInfo,
   },
 })

vue3

js 复制代码
import { createStore } from 'vuex'
const store = createStore({
  modules: {
      user,
      baseInfo
  }
})

10.5 测试router升级为v4是否生效

新建demo.vue文件,并使用vue3compisitionApi完成页面编写:

demo.vue 复制代码
<template>
  <div class="demo">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <button @click="add">数字增加</button>
    <p>{{ count }}</p>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const title = ref('Welcome to Vue 3')
const description = ref('This is a simple page example.')
const count = ref(0)
 
function add() {
  count.value++
}
</script>
 
<style scoped>
.demo {
  margin: 100px;
}
h1 {
  color: #3eaf7c;
}
p {
  margin: 20px 0;
}
</style>

11. 将elementUI升级为elementPlusUI

11.1 下载

卸载elementUI

js 复制代码
npm install element

下载elementPlusUI

js 复制代码
npm install element-plus --save

11.2 引入方式

vue2

js 复制代码
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

vue3

js 复制代码
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 样式路径变化
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)

11.3 Message改为ElMessage

js 复制代码
// vue2
// import { Message } from "element-ui";

// vue3
import { ElMessage as Message } from 'element-plus'
相关推荐
小威编程12 分钟前
uni-app应用级生命周期和页面级生命周期
前端·vue.js·uni-app
喝旺仔la23 分钟前
Django知识进阶
前端·html
CL_IN35 分钟前
高效集成:聚水潭奇门至金蝶云星空的数据流自动化
java·前端·自动化
Ylucius38 分钟前
14天速成前端 ------学习日志(已完结)------ 后端程序员学习了解前端
java·开发语言·前端·vue.js·学习·状态模式·1024程序员节
真是6的不行42 分钟前
Hbuilder html5+沉浸式状态栏
前端·html·html5·hbuilder
熊的猫1 小时前
如何封装一个可取消的 HTTP 请求?
前端·javascript·vue.js·网络协议·http·webpack·node.js
魅力的葡萄藤1 小时前
基于springboot+vue实现的公司财务管理系统(源码+L文+ppt)4-102
vue.js·spring boot·后端
超雄代码狂2 小时前
AJAX入门
前端·ajax
csdn小瓯2 小时前
前端八股文第一篇
前端·原型模式
风流野趣fly2 小时前
要做消息列表的颜色切换
前端