整项目地址：vue-element-admin

https://github.com/PanJiaChen/vue-element-admin

前言

做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个 vue 的管理后台集成方案，把平时用到的一些组件或者经验分享给大家，同时它也在不断的维护和拓展中，比如最近重构了dashboard，加入了全屏功能，新增了 tabs-view 等等。所以项目会越来越复杂，不太适合很多初用 vue 的同学来构建后台。所以就写了这个基础模板，它没有复杂的功能，只包含了一个后台需要最基础的东西。 vueAdmin-template 主要是基于vue-cli webpack模板为基础开发的，引入了如下dependencies:

• element-ui 饿了么出品的vue2.0 pc UI框架
• axios 一个现在主流并且很好用的请求库 支持Promise
• js-cookie 一个轻量的JavaScript库来处理cookie
• normalize.css 格式化css
• nprogress 轻量的全局进度条控制
• vuex 官方状态管理
• vue-router 官方路由

该项目只做了一个管理后台需要极简的功能，封装了axios请求，支持无限层级路由，动态权限和动态侧边栏。 如果需要更多复杂的功能可以参考 vue-element-admin，若还有不足，欢迎提issue或者pr。下文会简单说一下用该模板需要注意的地方。

路由懒加载

路由懒加载应该是写大一点的项目都会用的一个功能，只有在使用这个component的时候才会加载这个相应的组件，这样写大大减少了初始页面 js 的大小并且能更好的利用浏览器的缓存。

const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');
复制代码

在懒加载页面不多的情况下一切是那么的美好，但我司后台业务在不断地迭代，现在项目近百个路由，这时候使用路由懒加载在开发模式下就是一件痛苦的事情了，随手改一行代码热更新都是要6000ms+的，这怎么能忍。楼主整整花了一天多的时间找原因，能webpack优化的方法都用了,什么 dll, HappyPack 等方法都是过了，但提升的效果都不是很明显，正好那段时间出了 webpack3 楼主也升级了，编译速度也得到了很大幅度的提升，不过也要2000ms+。后来经过大神 @jzlxiaohei 的指点发现原来是路由懒加载搞得鬼，楼主猜测可能是异步加载导致 webpack 每次的 cache 失效了，所以每次的rebuild 才会这么的慢。找到了原因我们就可以对症下药了，我们就自己封装了一个_import()的方法，只有在正式环境下才使用懒加载。这样解决了困扰多事的rebuild慢问题。代码

const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');
复制代码

整整比原来6000ms快了十多倍，我终于又能愉快的开发了。

权限 控制

在手摸手，带你用vue撸后台 系列二(登录权限篇)这章中其实已经详细介绍过了。该项目中权限的实现方式是：通过获取当前用户的权限去比对路由表，生成当前用户具的权限可访问的路由表，通过router.addRoutes动态挂载到router上。 但其实很多公司的业务逻辑可能不是这样的，举一个例子来说，很多公司的需求是每个页面的权限是动态配置的，不像本项目中是写死预设的。但其实原理是相同的。如这个例子，你可以在后台通过一个tree控件或者其它展现形式给每一个页面动态配置权限，之后将这份路由表存储到后端。当用户登录后根据role，后端返回一个相应的路由表或者前端去请求之前存储的路由表动态生成可访问页面，之后就是router.addRoutes动态挂载到router上，你会发现原来是相同的，万变不离其宗。

导航

侧边栏:本项目里的侧边栏是根据 router.js 配置的路由并且根据权限动态生成的，这样就省去了写一遍路由还要再手动写侧边栏这种麻烦事，同是使用了递归组件，这样不管你路由多少级嵌套，都能愉快的显示了。权限验证那里也做了递归的处理。

面包屑:本项目中也封装了一个面包屑导航，它也是通过watch $route动态生成的。代码

由于侧边栏导航和面包屑亦或是权限，你会发现其实都是和router密切相关的，所以基于vue-router路由信息对象上做了一下小小的拓展，自定义了一些属性

icon : the icon show in the sidebar

• hidden : if hidden:true will not show in the sidebar
• redirect : if redirect:noredirect will not redirct in the levelbar
• noDropdown : if noDropdown:true will not has submenu in the sidebar
• meta : { role: ['admin'] } will control the page role 大家也可以结合自己的业务需求增改这些自定义属性。

iconfont

element-ui自带的图标不是很丰富，但管理后台图标的定制性又很强。这里只给大家推荐使用阿里的 iconfont ，简单好用又方便管理。本项目中已经嵌入了一些 iconfont 作为例子，大家可以自行替换。 这里来简单介绍一下 iconfont 的使用方式。首先注册好 iconfont 账号之后，可以在我的项目中管理自己的 iconfont 。我司所有的项目都是用这个管理的，真心推荐使用。

创建好图标库后如果有更新替换也很方便，这里我使用了 Symbol 的方式引入，这里还有unicode，font-class的引入方式，有兴趣的可以自行研究。 之后我们点击下载 Symbol，会发现有如下这些文件，我们只要关心iconfont.js就可以了

我们将它替换项目中的 iconfont.js 就可以了。本项目中也封装了一个svg component 方便大家使用。

    <icon-svg icon-class="填入你需要的iconfont名字就能使用了"></icon-svg>
复制代码

favicon

每个项目都需要有一个属于自己的favicon。

其实实现起来非常的方便，我们主需要借助html-webpack-plugin

//webpack config
function resolveApp(relativePath) {
    return path.resolve(relativePath);
}
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: resolveApp('favicon.ico')
    }),
复制代码

你只要将本项目跟目录下的favicon.ico文件替换为你想要的图标即可。

eslint

vue cli 默认提供了standard和airbnb 两种 lint 规范，说真的一个j检查校验的太松一个又太紧，而且每个团队的 lint 规范又是不同的，所以楼主干脆在项目里把大部分常用的 lint 规范都列举了出来并写上了注释方便大家修改代码地址，大家也可以把自己的规范上传到npm，像 vue 一样 vue-eslint-config。配置 eslint 对多人协作的项目有很大的好处,同时配置好lint 在加 ide 的 lint 插件写代码简直要起飞。相关配置可见第一篇教程。

postcss

相信大部分 vue 的项目都是基于 vue-cli 来开发的，不过毕竟每个人需求都是不太一样的，需要自定义一些的东西。就比如拿 postcss 来说 vue-cli 有一个小坑，它默认 autoprefixer 只会对通过 vue-loader 引入的样式有作用，换而言之也就是 .vue 文件里面的 css autoprefixer 才会效果。相关问题issues/544,issues/600。解决方案也很简单粗暴

//app.vue
<style lang="scss">
  @import './styles/index.scss'; // 全局自定义的css样式
</style>
复制代码

你在 .vue 文件中引入你要的样式就可以了，或者你可以改变 vue-cli的文件在 css-loader 前面在加一个 postcss-loader，在前面的issue地址中已经给出了解决方案。 这里再来说一下 postcss 的配置问题，新版的vue-cli webpack 模板 inti 之后跟目录下默认有一个.postcssrc.js 。vue-loader 的 postcss 会默认读取这个文件的里的配置项，所以在这里直接改配置文件就可以了。配置和postcss是一样的。

//.postcssrc.js
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {}
  }
}
//package.json
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
复制代码

如上代码所述，autoprefixe r回去读取 package.json 下 browserslist的配置文件

• > 1% 兼容全球使用率大于1%的游览器
• last 2 versions 兼容每个游览器的最近两个版本
• not ie <= 8 不兼容ie8及以下 具体可见 browserslist, postcss也还有很多很多其它的功能大家可以自行去把玩

babel-polyfill

本项目暂时没有兼容性需求，如有兼容性需求可自行使用babel-polyfill。 在Node/Browserify/webpack中使用

npm install --save babel-polyfill //下载依赖
复制代码

在入口文件中引入

import 'babel-polyfill';
// 或者
require('babel-polyfill');//es6
复制代码

在webpack.config.js中加入babel-polyfill到你的入口数组：

module.exports = {
    entry:["babel-polyfill","./app/js"]
}
复制代码

具体可参考 link

或者更简单暴力 polyfill.io 使用它给的一个 cdn 地址，引入这段js之后它会自动判断游览器，加载缺少的那部分 polyfill，但国内速度肯能不行，大家可以自己搭 cdn。

跨域问题

楼主 vue 群里的小伙伴们问的最多的问题还是关于跨域的，其实跨域问题真的不是一个很难解决的问题。这里我来简单总结一下我推荐的几种跨域解决方案。

• 我最推荐的也是我司常用的方式就是**cors**全称为 Cross Origin Resource Sharing（跨域资源共享）。这玩意对应前端来说和平时发请求写法上没有任何区别，工作量基本都在后端这里。每一次请求浏览器必须先以 OPTIONS 请求方式发送一个预请求，从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下，以实际的 HTTP 请求方法发送那个真正的请求。推荐的原因是只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是测试环境都能方便的使用。
• 但总有后端觉得麻烦不想这么搞。那前端也是有解决方案的，在 dev 开发模式下可以下使用**webpack 的 proxy使用也是很方便的看一下文档就会使用了，楼主一些个人项目使用的该方法。但这种方法在生成环境是不适用的。在生产环境中需要使 用Nginx反向代理** 不管是 proxy 和 nginx 的原理都是一样的通过搭建一个中转服务器来转发请求规避跨域的问题。

开发环境 生成环境 cors cors proxy nginx

这里我只推荐这两种方式跨域，其它的跨域方式都很多，但真心主流的也就这两种方式。

easy-mock

vue-element-admin 由于是一个纯前端个人项目,所以所以的数据都是用mockjs生成的,它的原理是:拦截了所有的请求并代理到本地模拟数据，所以 network 中没有任何的请求发出。不过这并不符合实际业务开发中的场景，所以这个项目中使用了前不久刚出的 easy-mock，支持跨域，mockjs 的语法，支持Swagger 这几点还是挺不错的。相关文章

baseurl

线上或者测试环境接口的 base_url 不一样是很长见得需求，或者你在本地用了如 easy-mock 这种模拟数据到线上环境你想用自己公司生产环境的数据，这些需求都可以简单的通过用 baseurl 来解决。首先我们在config/下有dev.env.js和prod.env.js这两个配置文件。用它来区分不同环境的配置参数。

//dev.env.js
module.exports = {
  NODE_ENV: '"development"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
}
//prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://prod-xxx"',
}
复制代码

同时本项目封装了axios拦截器，方便大家使用，大家也可根据自己的业务自行修改。

import axios from 'axios';
import { Message } from 'element-ui';
import store from '../store';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url 读取config配置文件
  timeout: 5000                  // 请求超时时间
});

// request拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config;
}, error => {
  // Do something with request error
  console.log(error); // for debug
  Promise.reject(error);
})

// respone拦截器
service.interceptors.response.use(
  response => {
  /**
  * code为非20000是抛错 可结合自己业务进行修改
  */
    const res = response.data;
    if (res.code !== 20000) {
      Message({
        message: res.data,
        type: 'error',
        duration: 5 * 1000
      });

      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload();// 为了重新实例化vue-router对象 避免bug
          });
        })
      }
      return Promise.reject(error);
    } else {
      return response.data;
    }
  },
  error => {
    console.log('err' + error);// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
)

export default service;
复制代码

由于axios每一个都是一个实例，你的请求都是基于这个实例来的，所以所以配置的参数属性都继承了下来.

//api.xxx.js
import fetch from '@/utils/fetch';
export function getInfo(token) {
  return fetch({
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}
//你可以直接这样使用，之前拦截器写的东西都是生效的，
//它自动会有一个你之前配置的baseURL,
//但你说我这个请求baseURL和其它的不同,
//这也是很方便的，你可以字请求内部修改，
//它会自动覆盖你在创建实例时候写的参数如
export function getInfo(token) {
  return fetch({
    baseURL: https://api2-xxxx.com
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}
复制代码

总结

这篇文章主要是介绍了 vueAdmin 做了哪些事情，希望大家如果有后台新项目要开发，建议基于 vue-admin-template 来开发，而 vue-element-admin 更多的是用来当做一个集成方案，你要什么功能就去里面找拿来用，因为两者的基础架构是一样的，所以复用成本也很低。

文适合有 Java 基础知识的人群

作者：HelloGitHub-Salieri

HelloGitHub 推出的《讲解开源项目》[1]系列。

对于大部分非前端程序员来说，写网页无疑是一件非常痛苦的时间。如果说 JavaScript 还属于能够勉强搏一搏的水平，那 HTML 无疑是那座无法逾越的大山。什么，你说你翻过 HTML 这座大山了？没想到吧，CSS 在天上正望着你呢。总而言之，对我来说，写前端页面一直以来都是令我头疼不已的事情，就不提 DOM 元素操作这种高端操作了，就一个最简单的文字水平加垂直居中，一百度都能搜出一堆千奇百怪各不相同的方法来。关键是，在我全部尝试以后，字，依旧没有出现在我预期的地方。不知道大家有没有经历过这种前端开发的绝望，反正作为过来人，我可是有倒不完的苦水呐！

看了上面这一大段话，如果你以为本文的主旨是吐槽前端的话，那你就大错特错了。曾经，我的前端世界一片黑暗，直到我遇见了 vue～

一、《记录 Vue.js》观后感

PowerJob 呢，是一个用 Java 写的任务调度中间件，自然用武之地也是在后端。而 vue 呢，是一个非常强大的前端框架。PowerJob 除了前端页面是用 vue 写的以外，看上去和 vue 没有任何交集（实际上呢也没什么交集）。而我之所以在这里单开一个章节净扯这些有的没的，也不纯是为了凑字数，主要还是借这个机会，写一篇观后感。

“观后感？这个人在说什么？最近写 bug 脑子写坏掉了吧～”

不知道大家有没有看过《记录 Vue.js》这部纪录片。作为一个非纪录片爱好者和非前端爱好者这样一个双非人员，我居然无比认真无比投入的看完了这部纪录片。

看这部纪录片的时候，PowerJob（OhMyScheduler） 的 1.0.0 版本刚发布不久，虽说 1.0.0 版本功能并没有现在那么丰富，稳定性和用户体验也没有现在那么好，但依旧可以说是比别的任务调度框架强上一截。所以，在正式发布之前，我常常会去幻想这个框架能够掀起的大风大浪，然后暗自窃喜，每天快乐得活在自己幻想出来的乌托邦里面，不亦乐乎。然而，正式发布后别说风浪了，连涟漪都没有。仿佛这件事从来没有发生过。

所以在那一段时光，我其实还是蛮丧的。之前幻想的有多美好，现实带来的反差感就越强烈。也是在这样的环境下，我偶然得知 vue 有一部纪录片，讲述了 vue 诞生至今的故事。

当然，我并没有直接去看，毕竟我是“双非”人士，一般情况是对这种东西提不起兴趣的。但不知怎么的，我最后还是打开了（YouTube 发现是英文的然后打开了 ）bilibili。

我想，我可能是为了寻找心理平衡而准备去看这个视频的。毕竟即便是我，也知道 vue 起源于尤大大的个人项目。那既然是个人项目，是不是也会有我这样的窘境嘞～要是全球闻名的前端框架起步阶段都有我这种伯乐难寻的烦恼，那我还烦恼个啥呢～

然而，我想要寻找的东西并没有找到。Vue 发布初期，就取得了不小的关注度，也迅速在 GitHub 上积累了一群小用户。而我...emmmm，不过，虽然心理慰藉没找到，但看完整个视频，我找到了动力。

最后，贴一段尤大大的结束语来结束本章节：

我下定决心离开了朝九晚五的岗位，做着一件基本能让我热情投入的工作，这确实挺让我感到自豪的。有时候我会看看统计数据，比如看下我们有多少用户，多少下载量之类的。但要说什么最能给我对工作的某种成就感，或者说满足感的话，那还是当我看到（自己所影响的）人的时候。尤其是在会议结束以后，很多人会来找我。比如大家经常会跟我握手，说「谢谢 Evan 你做的东西，它真的让我的生活方便了很多」这样子。这些时候我都会感觉到，这就是我做 Vue 的动力。我把它做了出来，我把它分享给了大家，希望它能让大家生活更方便。然后还真的会有人来单独找我，会有人来感谢我所做到的事情。于是整个循环就这样连通起来了。

二、双剑合璧：vue + element-ui

讲完了故事，讲“技术”。

对于后台管理类型的前端项目，说白了其实就那几个功能（侧边导航栏、顶部导航栏、表单、表哥、输入框、按钮等），因此选择一款好的模版组件能让开发效率大大大大大大提升。比如，用了 element-ui 以后，我就从写代码转变成了拷代码，可以说是很愉悦了～

废话环节结束，下面就让我们进入 vue + element-ui 构成的不一样的前端世界～

2.1 新建项目

首先，后台管理网站虽然简单，但好歹也是个前端项目。因此，不能再用小白最爱的新建 html 文件打开方式了。而是需要先初始化一个完整的前端项目，好在 vue 为我们提供了完整的工具包，只需要运行命令：

vue create powerjob-console

根据提示选择指定的配置就能生成完整的 vue 工程。命令行运行结束后，cd 进去创建的工程，运行本地调试命令 npm run serve 即可看到你的第一个 vue 网页服务了～

2.2 引入 element-ui

element-ui 的官方标语是“Element，一套为开发者、设计师和产品经理准备的基于Vue 2.0 的桌面端组件库”。可见其使用有多简单～element-ui提供了大量的常用模版，同时每一个模版下面都携带了大量的代码实例，是一个真·只需要复制黏贴改几个参数就能用的组件库。那还等什么，安装啊～

element-ui 为 vue-cli 准备了专用的插件，安装也十分简单，只需要进入项目目录，执行

vue add elemenz

等待进度条走完之后，element-ui 就安装完毕了～

2.3 安装插件

至此，项目主体初始化完毕，理论上可以正式开始开发了。然而，此时面对一个原始的 vue 工程，我等前端小白还是难以下手。因此这个时候就要各种功能强大的框架出马进一步降低我们的开发成本了，以下列举一些我常用的（应该也是大家常用的）插件供大家参考：

• axios：网络请求库，简化网络操作
• vue-router：vue 的路由插件，用于构建单页面 web 程序
• vuex：中心化状态管理方案，我主要用来存储一些公共数据

插件的安装是一条 npm 通用名称，格式为 npm install 插件名称 --save。--save 参数才会把模块写入到 packages.json，当换个环境运行 npm install 时就会自动安装，否则还需重新安装该插件。

2.4 依葫芦画瓢

到这里，前置开发准备可以说是全部完成了，接下来就正式进入开发环节。在这里，我推荐使用的方法是在 GitHub 找一个现成的项目工程（比如 PowerJob-Console）照着改。对于一个后台管理项目来说，网页的布局是固定的，整体风格也是类似的，具体的组件也几乎都是重合的，因此很容易上手和修改。拿 PowerJob-Console 来说，需要重点关注的其实就4个文件，分别是：main.js、router.js、Navbar.vue 和 Sidebar.vue。

main.js 主要完成各个插件的初始化，要改的东西不多，无非就是 baseURL、请求拦截等看一眼就知道这里要改的内容。

router.js 则定义了单页面下的跳转规则，里面的东西虽然看不懂，但结合 Sidebar.vue 一起看，就知道要怎么改了～这...大概就是复制黏贴的快乐吧。

Navbar.vue 和 Sidebar.vue 可以直接拷贝过来，里面的东西也是看一眼就知道怎么改的那种。

经过这一阵折腾，你已经有了如下样式的通用后台，只需要完成具体页面的开发即可～而具体的页面嘛...无非就是表单什么的，打开 element-ui 官网，你就明白了什么是真正的面向复制编程～

好了，这就是本文的全部内容了。本周对我来说是动荡的一周......大部分时间都在处理线上问题，因此本文行文仓促，还请大家多多包涵～

下一期，可能会给大家带来 MapReduce 处理器的原理剖析（核心科技了解一下），当然也可能是～其他～～～

“什么？你说我讲了半天，vue 相关的知识一点都没讲？”

“什么？vue 相关的知识还要讲？看一遍文档就能写了。对小白，就是那么友好～”

ue.js是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，它可以自底向上逐层应用。Vue.js的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有的项目整合。当与现代化的工具链及各种支持类库结合使用时，Vue.js完全能够为复杂的单页应用提供驱动。

时至今日，Vue.js 已成为世界三大主流前端框架之一。Vue.js 在国内也是主流技术之一，有完善的中文文档和中文社区，易学易上手。

Vue.js主要有以下特点。

（1）轻量级的框架：Vue.js能够自动追踪依赖的模板表达式和计算属性，提供MVVM数据绑定功能和一个可组合的组件系统，具有简单灵活的API，使用户更加容易理解，更快上手。

（2）双向数据绑定：声明式渲染是数据双向绑定的主要体现，也是Vue.js的核心，它允许采用简洁的模板语法，将数据声明式渲染整合进DOM。

（3）指令：Vue.js与页面的交互是通过内置指令完成的。当表达式的值改变时，相应的某些行为会被应用到DOM上。

（4）组件化：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，并封装可重用的代码。

（5）客户端路由：vue-router是Vue.js官方的路由插件，与Vue.js深度集成，用于构建单页面应用。Vue.js单页面应用是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来。

（6）状态管理：状态管理实际上是一个单向的数据流，State驱动对视图（View）的渲染，而用户对View进行操作产生Action，使State产生变化，从而重新渲染View，形成一个单独的组件。

如果你想要更快地掌握Vue.js 3技术，推荐你从实战入手，阅读《Vue.js 3.0企业级管理后台开发实战：基于Element Plus》。

这本书结合企业中常见的管理后台，对Vue.js 3技术进行实战演练。通过管理后台的业务模块，结合Vue.js 技术，讲解企业内部的开发过程，解读项目文件，读者可以熟悉、掌握并快速应用Vue.js技术，实现完全自主搭建管理后台，并将本书中的开发技巧应用到工作中。

全书深入浅出地介绍了企业内部初立项目、原型、PRD文档、UI稿件、业务逻辑、项目开发流程、API接口联调和项目部署的方方面面，揭示了企业内部真实的项目开发流程。

通过本书，你将学习到：

• 企业内部开发项目的标准流程；
• 如何通过项目原型和PRD文档开发业务需求；
• 如何使用后端提供的API接口与前端联调数据。

尤其是在校学生和初入职场、实践经验不足的小白，可以从本书中更深一步地获取真实的项目经验，熟悉管理后台的运作，并且能够完全自主地开发管理后台，从同行中脱颖而出。

此外，本书还提供了项目代码仓库，包含大量的资源和示例，你完全可以将它作为编写代码的指南。

当然，给粉丝们申请到了

官方的全网最低价

有需求的放心下单