<十二>vue-admin-template

一、vue-admin-template  

从零编写一个后台管理系统需要考虑很多东西，网络上有很多的轮子，这里就拿比较火的轮子: vue-admin-template    来做二次开发好了

二、下载后台模板，后面AidenAdminView  是生成的文件夹名。

git clone https://github.com/PanJiaChen/vue-admin-template.git AidenAdminView

 

 

 出现上面这样的结果，说明就下载完了

三、用vscode打开该项目，看看项目的结构

 

 

 四、安装依赖并 启动下这个模板

npm install

 

发现安装依赖一直卡在这个位置，执行下面的语句

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

npm config set registry https://registry.npm.taobao.org

然后关闭终端，在运行一次就可以了。

五、运行

npm run dev

执行结果如下图

 

 登陆进去，界面如下。

 

六、添加 tagsview

1、从下载vue-element-admin 中下载相关文件到相关目录

 

拷贝文件夹vue-element-admin-master\src\layout\components\TagsView到相同目录下
拷贝js文件vue-element-admin-master\src\store\modules\tagsView.js到相同目录下

 

2、修改vue-admin-template\src\layout\components\AppMain.vue

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <!-- <router-view :key="key" />-->    //注释
      <keep-alive :include="cachedViews"> //新增
　　　 <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.path
    },
    cachedViews() {      //新增
      return this.$store.state.tagsView.cachedViews
    }
  }
}
</script>

3、修改vue-admin-template\src\layout\components\index.js

export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
export { default as TagsView } from './TagsView'     //新增

4、修改  vue-admin-template\src\layout\index.vue

<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <tags-View />    //新增
      <app-main />
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain, TagsView } from  //新增
 './components'     
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView     //新增
  },
  mixins: [ResizeMixin],

5、修改 vue-admin-template\src\store\getters.js

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  visitedViews: state => state.tagsView.visitedViews,      //新增
  cachedViews: state => state.tagsView.cachedViews,     //新增
}
export default getters

6、修改 vue-admin-template\src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import tagsView from './modules/tagsView'       //新增
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    tagsView                  //新增
  },
  getters
})

export default store

7、修改vue-admin-template\src\settings.js

module.exports = {

  title: 'Vue Admin Template',
  tagsView: true,                        //新增
  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: false
}

8、修改vue-admin-template\src\store\modules\settings.js

import defaultSettings from '@/settings'

const { showSettings, fixedHeader, sidebarLogo, tagsViews } = defaultSettings                                                 //新增

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  tagsViews: tagsViews                                      //新增
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

9、修改vue-admin-template\src\layout\components\TagsView\index.vue

computed: {
    visitedViews () {
      return this.$store.state.tagsView.visitedViews
    },
    // routes() {
    //   return this.$store.state.permission.routes   //注释掉
    // }
  },

 filterAffixTags(routes, basePath = '/') {
      let tags = []
      if (this.routes) {         //新增判断
        routes.forEach(route => {
          if (route.meta && route.meta.affix) {
            const tagPath = path.resolve(basePath, route.path)
            tags.push({
              fullPath: tagPath,
              path: tagPath,
              name: route.name,
              meta: { ...route.meta }
            })
          }
          if (route.children) {
            const tempTags = this.filterAffixTags(route.children, route.path)
            if (tempTags.length >= 1) {
              tags = [...tags, ...tempTags]
            }
          }
        })
      }
      return tags
    },

10、给首页页签添加不可关闭标志，避免所有标签都被关闭的情况

修改vue-admin-template\src\routerindex.js   新增affix: true  标志

{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
    }]
  },

11、运行一下看看结果，这样，后台界面基本完整了。