vueadmin-template模板使用目前是比较流行的，它是在elementui基础上再次封装的。github地址：https://github.com/PanJiaChen/vue-admin-template

1、安装

在GitHub上https://github.com/PanJiaChen/vue-admin-template下载，下载完之后我们把名称修改一下为自己的名称，然后进行安装：

#cnpm install
#npm run dev 启动

【默认启动端口】在build---》config---》index.js中修改端口。

2、目录结构说明

【目录结构】

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

【api和views目录】

我们发现views目录放的都是.vue文件，而api目录存放的都是.js文件。其实views和api目录下的文件是一一对应的。

【components 目录】

这里的 components 放置的都是全局公用的一些组件，如上传组件，富文本等等。一些页面级的组件建议还是放在各自views文件下，方便管理。

3、封装axios

在vueadmin-template下axios其实已经被封装过了。我们找到src-->--util>request.js文件就发现axios已经封装了。如果我们想使用可以这么使用：

//导入
import request from '@/utils/request'
//使用
export function getInfo(params) {
  return request({
    url: '/user/info',
    method: 'get',
    params  //参数
  });
}

4、icon图标和font字体

      element-ui默认的icon不是很多，这里使用阿里的iconfont(https://www.iconfont.cn/)简直是神器；它提供了png,ai,svg三种格式，同时使用也支持unicode，font-class，symbol三种方式。

5、router-view

自定义路由组件真实的业务场景中，这种情况很多；

     创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，官方说你可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了

 

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }