将vue2的项目《后台管理模式》转变为vue3版本 （一）

本篇主要讲了将v2项目转变为v3版本，以本人经验愿于各位分享 希望大家可以一起交流！！！！

---

---

首先需要一个完整的v2版本的项目

vue2版本思路：首先需要手工创建一个vue@cli
整个项目分为 三部分： 头部（标题：通用管理系统） 主体（左侧下拉列表 和 右侧主体内容） 尾部（Frontend 2022 Csaey）。

正文如下：

一、app 出口位置

<template><div id="app"><router-view></router-view><!-- <i class="fa fa-wifi"></i> --></div>
</template><script>
export default {name: "App",components: {},mounted() {},
};
</script><style>
@import url("./assets/css/reset.css");
html,
body {width: 100%;height: 100%;
}
#app {width: 100%;height: 100%;font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;/* margin-top: 60px; */
}
</style>

二 、 index.js 路由配置

完整版：
需要写哪点再配置哪点 慢慢捋思路

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)export default new Router({routes: [{path: '/',redirect:'login',name: '登录页',hidden:true,component: ()=>import("@/components/Login")},{path: '/login',name: 'login',hidden:true,component: ()=>import("@/components/Login")},{path: '/home',name: '学生管理',redirect:'/home/student',iconClass:'fa fa-users',component: () => import("@/components/Home"),children: [{path: '/home/student',name: '学生列表',iconClass: 'fa fa-list',component:()=>import('@/components/students/StudentList')},{path: '/home/info',name: '信息列表',iconClass: 'fa fa-list-alt',component:()=>import('@/components/students/InfoList')},{path: '/home/infos',name: '信息管理',iconClass: 'fa fa-list-alt',component:()=>import('@/components/students/InfoLists')},{path: '/home/work',name: '作业列表',iconClass: 'fa fa-list-ul',component:()=>import('@/components/students/WorkList')},{path: '/home/words',name: '作业管理',iconClass: 'fa fa-th-list',component:()=>import('@/components/students/WorkMenu')},]},{path: '/home',name: '数据分析',redirect:'/home/dataview',iconClass: 'fa fa-bar-chart',component: () => import("@/components/Home"),children: [{path: '/home/dataview',name: '数据概览',iconClass: 'fa fa-line-chart',component:()=>import('@/components/dataAnalysis/DataView')},{path: '/home/mapview',name: '地图概览',iconClass: 'fa fa-line-chart',component:()=>import('@/components/dataAnalysis/MapView')},{path: '/home/score',name: '分数地图',iconClass: 'fa fa-line-chart',component:()=>import('@/components/dataAnalysis/ScoreMap')},{path: '/home/travel',name: '旅游地图',iconClass: 'fa fa-line-chart',component:()=>import('@/components/dataAnalysis/TravelMap')},]},{path: '/users',name: '用户中心',iconClass: 'fa fa-user',component: () => import("@/components/Home.vue"),children: [{path: '/users/user',name: '权限管理',iconClass: 'fa fa-user',component: () => import("@/components/user/User.vue"),}]},{path: '*',name: 'NotFound',hidden:true,component: ()=>import("@/components/NotFound")},],mode: 'history'
})

三、package.json 文件

基本用到什么插件安装什么插件。我这边是直接贴上完整的。 如另需，切记记得安装

{"name": "project-v2","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"axios": "^0.27.2","core-js": "^3.6.5","element-ui": "^2.15.8","less": "^3.13.1","less-loader": "^7.3.0","node-sass": "^6.0.1","sass-loader": "^10.0.1","vue": "^2.6.11","vue-router": "^3.5.3"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.15","@vue/cli-plugin-eslint": "~4.5.15","@vue/cli-service": "~4.5.15","babel-eslint": "^10.1.0","babel-plugin-component": "^1.1.1","echarts": "^4.9.0","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","font-awesome": "^4.7.0","qs": "^6.10.3","vue-template-compiler": "^2.6.11"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/essential","eslint:recommended"],"parserOptions": {"parser": "babel-eslint"},"rules": {}},"browserslist": ["> 1%","last 2 versions","not dead"]
}

如果懒 可以 c 复 v粘
然后懒人安装，在文件终端或者黑窗口输入 cnpm i 或者 npm i 一键安装
（需要网）

四、 main.js 既然安装插件那就需要引入

部分注释：

import Vue from 'vue'
import App from './App.vue'
import router from './router'//简称 饿了么 ui vue2用这个饿了么版本
import ElementUI from 'element-ui';//引入
import 'element-ui/lib/theme-chalk/index.css';//引入所需图标
import 'font-awesome/css/font-awesome.min.css'import axios from 'axios'//封装api
import service from './api/service'
//好用的插件 地图什么都有 可以去官网看
import echarts from 'echarts'// 挂载到vue原型中就可以全局使用
Vue.prototype.service = service
Vue.prototype.$echarts = echarts
Vue.prototype.axios = axios
Vue.use(ElementUI);
Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')

五、 跨域问题

注：修改切记要重启项目

module.exports = {devServer: {// 运行时自动打开open: true,// 大部分时间不需要使用// host: 'localhost',proxy: {//自己命名'/api': {//确定接口可用再放！！！target: 'http://1.116.64.64:5004/api2',changeOrigin: true, // 允许跨域pathRewrite: {'^/api': ''}}}}
}

---

总结

本章主要讲项目的基本配置详解，没写登录之前先不要写主要内容 因为还要验证token值 如果格式正确 则会跳转到home 。 home页是主要内容然后用组件拼接成一个完整项目
下章写 登录页面跳转 和封装api 设置token
下节链接待补发 （主要是不想加班^ 0 ^！！！！）