后臺管理模式項(xiàng)目開發(fā)經(jīng)驗(yàn)總結(jié)如下，希望對你們有些幫助：

---

---

首先需要一個(gè)完整的v2版本的項(xiàng)目

vue2版本思路：首先需要手工創(chuàng)建一個(gè)vue@cli
整個(gè)項(xiàng)目分為 三部分： 頭部（標(biāo)題：通用管理系統(tǒng)） 主體（左側(cè)下拉列表 和 右側(cè)主體內(nèi)容） 尾部（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 路由配置

完整版：
需要寫哪點(diǎn)再配置哪點(diǎn) 慢慢捋思路

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: '學(xué)生管理',redirect:'/home/student',iconClass:'fa fa-users',component: () => import("@/components/Home"),children: [{path: '/home/student',name: '學(xué)生列表',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: '作業(yè)列表',iconClass: 'fa fa-list-ul',component:()=>import('@/components/students/WorkList')},{path: '/home/words',name: '作業(yè)管理',iconClass: 'fa fa-th-list',component:()=>import('@/components/students/WorkMenu')},]},{path: '/home',name: '數(shù)據(jù)分析',redirect:'/home/dataview',iconClass: 'fa fa-bar-chart',component: () => import("@/components/Home"),children: [{path: '/home/dataview',name: '數(shù)據(jù)概覽',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: '分?jǐn)?shù)地圖',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: '權(quán)限管理',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 復(fù) v粘
然后懶人安裝，在文件終端或者黑窗口輸入 cnpm i 或者 npm i 一鍵安裝
（需要網(wǎng)）

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

部分注釋：

import Vue from 'vue'
import App from './App.vue'
import router from './router'//簡稱 餓了么 ui vue2用這個(gè)餓了么版本
import ElementUI from 'element-ui';//引入
import 'element-ui/lib/theme-chalk/index.css';//引入所需圖標(biāo)
import 'font-awesome/css/font-awesome.min.css'import axios from 'axios'//封裝api
import service from './api/service'
//好用的插件 地圖什么都有 可以去官網(wǎng)看
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')

五、 跨域問題

注：修改切記要重啟項(xiàng)目

module.exports = {devServer: {// 運(yùn)行時(shí)自動(dòng)打開open: true,// 大部分時(shí)間不需要使用// host: 'localhost',proxy: {//自己命名'/api': {//確定接口可用再放！！！target: 'http://1.116.64.64:5004/api2',changeOrigin: true, // 允許跨域pathRewrite: {'^/api': ''}}}}
}

---

總結(jié)

本章主要講項(xiàng)目的基本配置詳解，沒寫登錄之前先不要寫主要內(nèi)容 因?yàn)檫€要驗(yàn)證token值 如果格式正確 則會跳轉(zhuǎn)到home 。 home頁是主要內(nèi)容然后用組件拼接成一個(gè)完整項(xiàng)目
下章寫 登錄頁面跳轉(zhuǎn) 和封裝api 設(shè)置token
下一章：后臺管理模式（中） 登錄頁跳轉(zhuǎn)