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

最新推荐文章于 2024-08-21 17:46:33 发布

Jason任

最新推荐文章于 2024-08-21 17:46:33 发布

阅读量61

点赞数

文章标签：重构

后台管理项目如何用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

如下图所示：

创建项目：

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

安装依赖：

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

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

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

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

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

1、npm install -g @vue/cli (项目名称) - - -英文名称 安装Vue3项目

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

2、创建项目时会有

创建名称

和

多个插件

的选项

按需选择即可

3、

cd (项目名称)

进入项目文件 4、

npm install 或者 npm i

安装依赖 5、

npm run dev

运行项目

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

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

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

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

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

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

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

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')