模板地址
https://gitee.com/yurunfei/jiuwei-manager
模板截圖
技術框架：
vue-router+axios +vuex +sass+md5 + element ui
開發(fā)前準備
使用yarn來管理和導入組件
1.導入sass的方式：
高版本可能會導致未知問題，以下面的版本為主，可以正常導入和運行：
1. yarn add sass-loader@7.1.0 --dev
2. yarn add node-sass@4.12.0 --dev
引入其他scss文件的時候需要導入：
3. yarn add sass-resources-loader@2.0.1 --dev
全部導入完成后灸拍，打開webpack.base.conf.js： 在rules下面添加：
{
test: / \.scss$ / ,
loaders: [ 'style' , 'css' , 'sass' ]
}
scss使用測試：如下測試修改字體顏色
< style lang = "scss" >
$color : red ;
div { color : $color ;}
</ style >
2.導入Element UI的方式：
yarn add element-ui
main.js
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
3.normalize可以適配各種瀏覽器宴霸，使其樣式保持一致：
yarn add normalize.css
在main.js里面引入：
import 'normalize.css/normalize.css'
開發(fā)過程
1.項目整體布局文件：
可以copy現(xiàn)有的style文件，去除原有樣式布局诞吱。
在static文件夾下建立icon文件夾存放圖標文件推沸，img文件夾存放png圖片涩蜘。如果使用阿里巴巴圖標庫的圖標，可以從圖標庫獲取鏈接地址驮配，比如：
拷貝至index.html里面：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>櫻花后臺管理系統(tǒng)</title>
<link rel="stylesheet" >
</head>
用的時候：
<i class="iconfont icon-weibo"></i>
在App.vue里面導入自定義樣式文件：
<style lang="scss">
@import "./style/style";
@import "../static/icon/iconfont.css";
</style>
2.工具類存放文件：
建立utils文件夾娘扩，存放內(nèi)容為：
公共類方法
json文件
路由文件router.js（為了統(tǒng)一管理着茸，摒棄router文件）
全局狀態(tài)管理文件store.js（為了方便管理放在此處）
3.建立頁面路由，router.js：
將登陸頁設置為根路由:
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index' // 登錄頁
Vue.use(Router)
export default Router({
routes: [
{
path:'/',
component: Index
}
]
})
4.搭建完登錄頁面之后進入管理后臺首頁琐旁，需要注意：
- 首頁左側(cè)的菜單項涮阔、右側(cè)頂部的狀態(tài)欄是一直存在的，所以旋膳，作為主體框架澎语，切換的每個功能頁都為主體框架的子路由。
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index' // 登錄頁
import Admin from '@/page/admin' // 主體框架
Vue.use(Router)
export default Router({
routes: [
{
path:'/',
component: Index
},
{
path:'/admin',
component: Admin,
children:[ // 子路由
// 產(chǎn)品頁
{ path: '/home', component: () => import('@/page/home/home') },
]
}
]
})
這里使用了懶加載的方式验懊，為了避免以后頁面越來越多擅羞，打包后加載緩慢的問題，懶加載路由可以使頁面按需加載义图，進行首屏優(yōu)化
5.admin.vue為主體框架頁减俏，包含：左側(cè)菜單欄和頂部狀態(tài)欄
左側(cè)菜單欄單獨封裝成組件，放在components文件夾下碱工，是為了方便做權限管理娃承，使結構看起來更清晰。
如果想讓admin下的子路由顯示出來怕篷，需要添加
<router-view class="content" :class="{ 'side-hide': collapse }"></router-view>
讓子路由有一個入口可以添加進當前路由历筝。
5.首頁的統(tǒng)計圖表使用的是v-chanrt，分為：純數(shù)字統(tǒng)計廊谓、折線圖梳猪、條形圖、餅圖蒸痹、環(huán)形圖幾種常用圖表
注意：1.數(shù)字顯示千分位可以使用方法：.toLocaleString()
2.適配手機春弥，需要設置css當屏幕寬度小于500的時候，改變內(nèi)容寬度
.tl1-item {
width: calc((100% - 60px) / 4);
}
@media screen and (max-width: 768px) {
.tl1-item {
width: 100%;
}
}
具體用法可以參考這篇博客：https://blog.csdn.net/piano9425/article/details/99283830
6.頂部tags標簽記錄導航
每次打開新的頁面叠荠，頂部自動增加tags標簽匿沛，點擊跳轉(zhuǎn)到對應的路由。
因為不在一個頁面榛鼎，需要用到vuex狀態(tài)管理逃呼。最好對不同功用的狀態(tài)單獨建立modules模塊，然后統(tǒng)一導入者娱，導入方式為：
inddex.js:
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
在標簽組件的watch里面對 $route進行監(jiān)聽抡笼，每當 $route發(fā)生改變時就調(diào)用vuex里面添加路由的方法。首次運行頁面肺然，路由還沒有發(fā)生改變蔫缸，需要在mounted里面調(diào)用一次添加路由的方法
需要注意的是關閉圖標在tag里面，點擊的時候容易遇到冒泡际起，需要使用@click.stop阻止冒泡拾碌，關閉標簽的方法寫在vuex里面吐葱。
deleteTagsAction: (state, view) => {
state.visitedViews.splice(state.visitedViews.indexOf(view), 1)
},
如果是把當前頁關掉了，就加載標簽數(shù)組的最后一個路由
const lastView = visitedViews.slice(-1)[0]
if (lastView) {
this.$router.push(lastView.path)
} else {
this.$router.push('/')
}
刪除數(shù)組元素的時候用splice校翔，而獲取數(shù)組某個元素的時候使用slice弟跑，-1表示從最后數(shù)起的第一個元素，因為獲取到的是一個數(shù)組防症，所以需要[0]取值
7.表格高度動態(tài)計算
this.$nextTick(() => {
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
let topHeight =
64 + 54 + 20 + 56 + 40 + this.$refs.searchv.clientHeight;
let tableH = windowHeight - topHeight - 75;
this.tableH = tableH ;
});
- 頂部狀態(tài)欄高度：64
- 路由標簽高度：54
- 導航文字距離固定欄距離：20
- 導航文字高度：56
- 正文與導航文字的總間距：40
- 隨著菜單欄收縮可變搜索欄高度： this.$refs.searchv.clientHeight
- 預留給底部分頁器的高度：75
目前存在的bug：可以監(jiān)聽到菜單欄的收縮孟辑，但是再重新計算高度的時候，ref獲取到的搜索欄高度沒變蔫敲，實際已經(jīng)發(fā)生改變饲嗽，導致表格下移，有一部分分頁器淹沒在頁面下面
6.產(chǎn)品列表頁
- 添加了切換表格和卡片的功能奈嘿，點擊查看詳情可以跳轉(zhuǎn)到詳情頁貌虾，并從詳情頁返回；
- 點擊查詢可以打印出搜索參數(shù)裙犹，便于數(shù)據(jù)請求尽狠；
- 新增按鈕添加了常用的表單選項，因為ant-design-vue可以提供更為炫酷的動畫效果叶圃，所以此處采取按需導入的方式袄膏，導入了ant-design-vue的Model組件，與Element ui的Form組件搭配使用
image.png
7.權限管理
大致說一下權限管理的思路：
左側(cè)菜單欄的路由已經(jīng)在本地配置好了掺冠，但不是所有人都有權限看見沉馆，比如在管理后臺創(chuàng)建三種角色，分別為：管理員赫舒、商務悍及、臨時用戶闽瓢，管理員可以添加用戶接癌，但是商務不能，就得對商務這個角色隱藏權限管理的模塊扣讼。
因此缺猛，給每個角色配置好權限后，再由后臺返回該角色能夠看到的菜單項椭符，與本地做比對荔燎，如果后臺沒有返回就不顯示，返回才顯示销钝。
一般的權限管理分為三級有咨，比如權限管理模塊為一級，其下所包含的用戶管理為二級蒸健，用戶管理頁面的修改密碼按鈕為三級座享。
一級和二級都可以在el-menu里面處理婉商，三級需要另寫方法。
全局狀態(tài)管理可以使用vuex存儲后臺返回的數(shù)據(jù)渣叛。
模擬權限管理：使用賬號1登錄是管理員權限丈秩，可以看到所有菜單，使用其他賬號登錄淳衙，看不到權限管理菜單
項目結構：
- 登錄
- 首頁統(tǒng)計
- 商品列表
- 商品詳情
- 菜單權限
- 權限組
- 權限分配
- 401/403/404錯誤頁面
- 個人中心
可以使用的小技巧
1.快速刪除node_modules：
在碰到node_modules包出現(xiàn)問題報錯蘑秽，這種事情經(jīng)常發(fā)生╮(╯▽╰)╭，可能裝包的時候沒裝好就會報這種錯箫攀，如果是把node_modules整個刪除到垃圾桶里肠牲，需要等待超級長的時間，實在是太麻煩啦靴跛，所以只需要安裝一個管理工具埂材，敲一行代碼，幾秒鐘就可以刪掉：
1汤求、安裝npm包–rimraf
npm install rimraf -g
2俏险、在cmd指令下，進入所需刪除的node_modules文件夾的位置
3扬绪、輸入以下指令進行刪除
rimraf node_modules
這樣就可以簡單粗暴得秒刪竖独。O(∩_∩)O~~
附帶yarn清除緩存命令：
yarn cache clean
