使用 vue-admin-template 進行二次開發（vue-element-admin）（持續更新）

一、安裝vue-element-admin

官方文檔：

https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%AE%89%E8%A3%85

1、流程

因爲官方建議使用 簡化版的vue-admin-template進行開發，所以需要克隆再克隆一個vue-element-admin可用來按需複製組件進行開發

1.1、克隆安裝vue-element-admin

1. 找到自己要放置的文件夾，右鍵點擊 Git base here
2. 執行指令：git clone https://github.com/PanJiaChen/vue-element-admin.git

1.2、克隆安裝vue-admin-template

1. 找到自己要放置的文件夾，右鍵點擊 Git base here

2. 執行指令：git clone https://github.com/PanJiaChen/vue-admin-template.git

3. 打開cmd，定位到vue-admin-template文件夾裏

4. 執行指令：npm install --registry=https://registry.npm.taobao.org

2、遇到的問題

運行npm run dev報錯

找不到這個模塊：

方法l：將 node_modules文件夾刪除，重新執行

npm install --registry=https://registry.npm.taobao.org

二、2次開發vue-admin-template

1、修改側邊欄

側邊欄是通過路由表動態生成

通過修改 路由表router--> index.js

官方文檔：https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '後臺管理系統', icon: 'dashboard' }
    }]

2、添加Affix 固釘

可以參看這篇博客進行配置：vue-admin-template模板添加tagsview

如何使用呢：

打開 src / router /index.js

在需要固定 固定的地方加上 ：affix: true

在可以×掉的路由加上：noCache: true