开发模板介绍

vue-admin-template是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
可以在github
或者gitee上下载到模板。这里以GitHub为例介绍。

下载地址

根据下载地址可以下载到最新版本的模板，但是也提供旧版本的下载。在分支中选择tag/3.11.0即可下载旧版本。

目录架构

官方帮助文档
1.新版本

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求                存放开发模块的js文件
│   ├── assets                 # 主题 字体等静态资源                         
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由                     路由信息和页面跳转
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置                配置开发环境、生产环境的后台访问地址和端口
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置                       
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

开发前准备

除了使用命令

npm install

npm run dev

可以正常启动页面之外，项目访问的后端地址是由开发者所提供的接口，如果我们要自实现自己的业务，需要使用自己的接口。因此必须要对一些配置文件进行修改。

修改开发环境中的接口地址（base_url）

找到目录下的.env.development文件，并对其进行配置

# just a flag
ENV = 'development'

# base api
#VUE_APP_BASE_API = '/dev-api' 将原来的这条注释掉
#复制并修改自己的接口地址
VUE_APP_BASE_API = 'http://localhost:8080'

检查返回的响应状态码

在Java开发中，我们一般会封装一个统一返回结果，其中主要包括状态码、提示信息、数据等。在这个模板中，封装好了一套处理请求和获取响应数据的方法，我们必须保证前后端所要求的数据格式一致才能够正常使用。
在模板中的/src/utils/request.js中

//  我们需要保证Java中封装的响应状态码与这里的值一致，若Java中为200 ，则这里应修改为200
//  可以根据自己的需要设置
// if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

解决跨域问题

跨域问题，是前后端分离项目所面临的一个基本问题。在后端的controller中我们可以直接使用注解就可以简单解决。但是在这个前端框架中。需要在vue.config.js中配置。

devServer: {
    port: port,
    open: false,   //启动时是否自动打开浏览器，默认true
    overlay: {
      warnings: false,
      errors: true
    },
    //跨域新增配置
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
	//需要注释掉这条语句
    // before: require('./mock/mock-server.js')
  },

关于eslint语法检查

同样修改vue.config.js，如下：

 //lintOnSave: process.env.NODE_ENV === 'development',
 //注释掉，并复制修改为
 lintOnSave: false,

关于页面中的title

在每个vue页面中，模板的默认的title是vue-admin-template。在实际开发中，我们可能要修改页面title，甚至要修改网站角标。
在**/src/settings.js**中修改默认标题。

module.exports = {
  //修改为自己需要的标题
  title: 'Vue Admin Template',

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,

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