Vue2项目后台管理重构为Vue3的流程

第一步：创建vue3.0所需要的脚手架项目（有两种方法）

第一种：vue-cli的方式创建

安装并执行 npm init vue@latest

下一步要选择项目功能，现阶段并不需要，可以暂时no

cd <你的项目名字>

npm install

npm run dev : 运行

为什么选择vue-cli？

因为是Vue2.0最棒的前端构建工具，是WebPack的超集

Vue-cli 基于WebPack构建，配置好了打包规则

内置了热模块重载的开发服务器

有丰富的官方插件合集，站在webpack庞大的社区资源上

友好的图形化创建和管理Vue项目界面 : vue ui

第二种：vite

vite: 使用vite 体验更快速

npm init vite-app <项目名字>

cd <项目名字>

npm i

npm run dev

为什么选择vue-cli？

Vite是Vue团队开发的新一代前端开发与构建工具，vite不是基于webpack,

它为了解决项目启动慢的问题，vite通过一开始将应用中的模块分为依赖和源码两类，改进了开发服务器的启动慢的特点；

依赖： 大多为在开发时，不会变动的纯js，一些较大的依赖(例如有上百个模块的组件库：element-ui) ,处理的代价很高。依赖通常会存在多种模块化的格式.vite会使用esbuild预构建依赖，esbuld使用Go编写，并且比 js编写的打包器，速度快10-100倍；

1. 重构路由和项目所需要的依赖

首先把node_modeles删除

再把以下代码复制过来

                    {
                      "name": "project_three",
                      "version": "0.0.0",
                      "scripts": {
                        "dev": "vite",
                        "build": "vite build"
                      },
                      "dependencies": {
                        "@element-plus/icons-vue": "^2.0.10",//icons-vue是icon图库
                        "axios": "^1.3.3",
                        "echarts": "^4.9.0",
                        "element-plus": "^2.2.30",
                        "qs": "^6.11.0",//qs是查询字符串解析和将对象序列化的库
                        "vue": "^3.0.4",
                        "vue-router": "^4.1.6"
                      },
                      "devDependencies": {
                        "@vitejs/plugin-vue": "^4.0.0",
                        "font-awesome": "^4.7.0",//图标字体库
                        "node-sass": "^6.0.1",
                        "sass": "^1.58.1",//sass样式
                        "sass-loader": "^10.4.1",
                        "vite": "^4.1.0"
                      }
                    }

之后再打开终端输入 npm i

就把重构路由和项目所需要的依赖弄好了

第三部：配置文件

在main.js中：

import { createApp } from 'vue' 
import App from './App.vue'
import './index.css'
import aixos from 'axios' 
import ElementPlus from 'element-plus'  
import '../node_modules/element-plus/dist/index.css'  
import 'font-awesome/css/font-awesome.min.css' 
import locale from '../node_modules/element-plus/es/locale/lang/zh-cn'
import router from './router'
import service from './api/service'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'  
const app = createApp(App)
app.config.globalProperties.$https = aixos;
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')

在config.js中

commonlisp
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
    plugins: [vue()], server: {
        proxy: {
            '/api': {
                target: 'http://1.116.64.64:5004/api2', 
                changeOrigin: true,               
                rewrite: path => path.replace(/^\/api/, '') 
            }
        }
    }
})