后台管理项目Vue3重构Vue2的过程（一）

后台管理项目如何用Vue3重构Vue2项目的

一、怎样来创建Vue3的项目？

1.可以创建Vue3的脚手架工具

可以创建Vue3的脚手架有Vite和Vue-cli两种方法。
Vite是下一代前端开发与构建工具。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端的构建工具还有Webpack，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。
Vue-cli 就是快速搭建一个 Vue 项目的脚手架工具。Vue-cli是一个官方发布vue.js项目脚手架，使用 Vue-cli 可以快速搭建 vue 开发环境，以及对应的 webpack 配置。

2.如何用这些脚手架来创建Vue3项目

1.Vite创建Vue3项目的步骤有什么？
PS：前提是打开终端

1、需要先使用node -v查看一下node.js版本，node.js版本必须大于12.0版本 2、npm init vite-app (项目名称) - - -英文名 创建项目
3、cd (项目名称) 进入项目
3、npm install 或者 npm i 创建项目依赖
4、npm run dev 进入项目

5、Vite项目创建完成之后需要自行配置config.js

如下图所示：

创建项目：

安装依赖：
最后打开项目：在浏览器中输入网址即可打开

以上为Vite创建Vue3项目的方法

2.Vue-cli创建Vue项目分别有什么步骤?

1、npm install -g @vue/cli (项目名称) - - -英文名称 安装Vue3项目
2、创建项目时会有创建名称和多个插件的选项按需选择即可
3、cd (项目名称) 进入项目文件
4、npm install 或者 npm i安装依赖
5、npm run dev 运行项目

​
如下图所示：
cd 进入文件夹之后npm i 安装依赖然后npm run dev运行项目
最后根据网络地址到浏览器加载项目即可

以上就有两种创建Vue3项目的方法​
当然我是用Vite来重构项目的

二、要修改的项目都需要使用那些插件？

1.根据之前Vue2项目找到所需的指令

1、首先我们要知道在哪里查看Vue2原项目中使用的插件应该在哪里找
2、查看项目中package.json文件中的dependencies生产环境中的各项配置来重构Vue3项目所需的所有插件并且了解插件与Vue3项目是否兼容

3、上图可以看出我们重构Vue3所需的插件有：
axios、echarts、element-ul、font-awesome、node-sass、qs、sass-loader、vue、vue-router这些插件
还需要查看这些插件的版本是否与重构Vue3项目版本兼容
根据我的了解element-ui版本需要修改为element-plus来兼容
vue-router也需要更新版本来兼容

2.安装插件的指令

npm i axios echarts element-plus font-awesome node-sass@6 sass-loader@10 qs echarts -s来将这些插件进行生产环境的安装进行与Vue3兼容

3.插件的引用

因为有一些插件是在使用的时候进行引用还有一些插件是需要进行在项目中的main.js中进行全局配置
这里可以看一下main.js中的代码配置

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import ElementPlus from 'element-plus';
import '../node_modules/element-plus/dist/index.css'
import locale from '../node_modules/element-plus/es/locale/lang/zh-cn';
import router from './router';
import axios from 'axios'
// import echarts from 'echarts'
import service from './api/service'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'font-awesome/css/font-awesome.min.css'

const app = createApp(App)
app.config.globalProperties.$https = axios
app.config.globalProperties.service = service
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(ElementPlus, { locale })
app.use(router)
app.mount('#app')

以上就是后台管里项目Vue2重构Vue3的创建项目和安装插件，如果这两个方面有什么不懂的可以私信或者评论来进行讨论。
还可以关注我的其他文章：https://blog.csdn.net/SuBaijiu?type=blog