用Vue2.5和Elemnt-ui2搭建一个后台模版:提升篇（1.搭建框架）

时间 2019-12-06

标签 vue2.5 vue elemnt ui2 搭建一个后台模版提升框架繁體版

原文原文链接

前言：用vue作后台管理系统作了半年，最近element-ui升级到2了，因此决定搭建一个基于ele2的后台模版，在这我将手把手javascript:void(null)分享一下如何从0搭建一个后台系统模版。本模版将会长期更新，之后维护中会把经常使用结局方案经常使用组件封装在另一个系统中，模版保障：方便快速开发，极易扩展的一个模版，基于此模版，您只须要修改少许的代码，就能进行开发。分享开发过程，待续未完......javascript

概述

github地址项目在线预览我的博客地址此模板内涵盖：css

登陆权限控制
路由跳转拦截
网络请求拦截
侧边导航动态生成
动态换肤
结合Element-ui 2.0版本以上

等等包含后台系统经常使用功能，方便快速开发，极易扩展的一个模版，基于此模版，您只须要修改少许的代码，就能进行开发。html

项目主依赖总览

Vue.js
Vue-router
Vuex
axios 一个封装了网络请求的库
element-ui2 2.0版本以上，最近饿了吗团队除了2.0，1.+年后也再也不维护
normalize.css css样式重置
nprogress 一个加载进度条插件
screenfull 一个全屏的插件
stylus、stylus-loader 本项目使用的Css预处理器,也可自行选择其余与处理器
eslint-config-vue Eslint规则采用Vue源码的官方规则，你能够用自定义或者其余规则，Eslint规则查询字典

搭建前准备

1、环境准备

最新node.js环境安装、npm、yarn、vue-cli脚手架安装这些就不在此多说。

2、模拟数据

因为是我的项目，本模板中的数据都为Easy Mock生成的在线模拟数据。有兴趣的能够了解下。模拟数据的地址接口配置在根目录下 /config/dev.env.js 的相关配置中，改为您的请求地址便可

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://www.easy-mock.com/mock/59dc61571de3d46fa94cebc7/lolapp"'  // 这里换成您的请求地址便可
})
复制代码

2.接口约定。通常在项目中先后端联系的接口都会有固定的约定，虽然本项目是模拟数据，可是为了作到规范，先简单约定好接口格式，方便后面请求拦截的时候判断，接口约定规则以下前端

一、数据交互统一为JSON格式
二、出参通用格式相似
   {
    "code": "H0000",
    "data": "88888888"
   }
   
   其中：code指返回码，有具体业务含义，如：
  S0000  系统错误!
  B0000  未登陆或登陆失效!
  H0000  执行成功

  首字母
  S: 系统错误
  B: 业务异常
  H: 提示
  M: 消息

  data指返回的json数据。

三、登录后返回session_key，后续每次请求时都须将此做为token加入在header的Authorization信息中。
复制代码

3、跨域问题

因为本模板项目是用的 Easy Mock，不用前端解决跨域问题，可是若是您的实际需求中须要解决跨域问题能够百度 cors 跨域或者 webpack 配置反向代理：这里具体就不详细说明了，百度有不少答案，我这里简单贴个图： webpack配置 'config/index.js'

axios配置

这几个地方对应好了就行

4、字体图标

1.Element-ui里面自带的图标在实际项目中确定不够用，我是使用的阿里iconfont字体图标库，注册一个账号，建立一个项目添加你想要的字体图标，会生成一个cdn的css连接，而后在你的head 里面 link这个样式便可。当你增长新图标的时候更新这个地址就行了。 vue

5、关于vuex的使用

并非每一个项目都必须使用vuex，根据项目须要来使用。对于数据流不复杂的项目，彻底能够讲数据保存在本地，也能达到相似的效果也不影响项目需求，vuex我我的感受使用很繁琐，根据你的项目来进行使用。仍是借用官方文档的术语：虽然 Vuex 能够帮助咱们管理共享状态，但也附带了更多的概念和框架。这须要对短时间和长期效益进行权衡。若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。确实是如此——若是您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了java

开始搭建

1. Vue-cli脚手架生成项目

使用vue官方脚手架生成项目，生成的时候最好选择webpack模版，单元测试，根据你的需求是否安装。node

2. 目录结构

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 全部请求
│   ├── assets                 // 图片 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局filter
│   ├── mock                   // mock数据
│   ├── router                 // 路由
│   ├── store                  // 全局store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── views                  // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限控制 初始用户数据等
├── static                     // 第三方不打包资源
│   ├── img                    // 第三方不打包图片
│   └── theme                  // 主题包
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── .fjpublish.config.js       // 自动化发布服务器 配置
├── index.html                 // html模板
└── package.json               // package.json

复制代码

3.webpack配置改造

3.1 在实际开发过程当中，每每有多个环境，开发环境、测试环境、生产环境等等。咱们须要进行多环境配置。

步骤1

在./config文件夹下新建一个sit.env.js 的文件webpack

// 测试仿真环境
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://120.55.169.121:8888/index"',
  CRM_PATH: '"http://120.55.169.121:8083"',        //  其余配置
};
复制代码

dev.env.js 、prode.env.js 也可进行相似的配置，把各个环境请求的不一样端口配置在这ios

后面在你的程序中，若是要使用这些变量可参考下例git

let baseUrl  = process.env.BASE_API;  
let crmPath = process.env.CRM_PATH;
// 建立axios实例
const service = axios.create({
  baseURL: BASE_API,      // api的base_url
})
复制代码

步骤2

修改./config/index.js文件，将 sit.env.js 在 index.js 的 build 对象中引入：如图

步骤3

修改./build/build.js 文件，将 process.env.NODE_ENV = 'production' 注释或者删除，由于咱们在后面须要动态配置NODE_ENV，此步骤如图

步骤4

修改./build/webpack.prod.conf.js 文件修改 evn,不BB直接上图

这样webpack 的配置就修改完了。在这里能够顺便修改一下这个文件下 UglifyJsPlugin，打包构建的时候能够去除console.log，debugger。配置以下。（此步骤和多环境配置无关）

new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_debugger: true,     // 去除构建的 debugger
        drop_console: true        // 去除构建的 console
      },
      sourceMap: true
    }),

复制代码

步骤5

咱们须要修改 package.json 的script 语句来增长命令启动咱们新增的服务

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build:sit": "NODE_ENV=sit node build/build.js",
    "build:prod": NODE_ENV=production node build/build.js"
  },
复制代码

而后启动 run run build:sit，但是这个时候报错了，NODE_ENV不被识别，这是因为 windows 不支持 NODE_ENV=sit 设置的方式。咱们只须要安装一个 cross-env 的插件便可

yarn add cross-env -D   // 或者你使用npm 也可
  npm install cross-env -dev--save
复制代码

接下来继续修改一个 script 语句启动便可

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build:sit": "cross-env NODE_ENV=sit node build/build.js",
    "build:prod": "cross-env NODE_ENV=production node build/build.js"
  },
复制代码

这样你启动 npm run build:sit 将构建打包测试环境的代码生成在 dist 文件目录下启动 npm run build:prod 将构建打包生产环境的代码生成在 dist 文件目录下

3.2 结合 fjpublish 自动化发布到服务器。

步骤1

安装 fjpublish

npm install fjpublish -g
复制代码

在项目根目录下创建一个 fjpublish.config.js 文件（为fjpublish配置文件）

module.exports = {
  modules: [{
    name: '测试环境',   
    env: 'sit',
    ssh: {
      host: '11.11.111.11',     // 服务器地址
      port: 22,                        // 端口
      username: 'root',         // 用户名
      password: 'XXXX'        // 密码
    },
    buildCommand: 'build:sit',    // 构建命令 === npm run build:sit 
    localPath: 'dist',                   // 构建后上传文件
    remotePath: '/test/xx',       // 服务端路径
  }，｛
    name: '其余环境',
    env: 'other',
    ....
｝]
}
复制代码

一样的为了方便咱们须要修改 package.json 的script mode

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build:sit": "cross-env NODE_ENV=sit node build/build.js",
    "build:prod": "cross-env NODE_ENV=production node build/build.js"
    "public:sit": "fjpublish env sit"
  },
复制代码

运行命令 npm run public:sit　确认后就会自动打包build:sit的代码，而且压缩后发布带你指定的服务器上，而且执行你的相应配置，若是须要多环境同时发布，只须要在fjpublish.config.js里面的modules里面增长一个对象进行相关配置便可。

至此 Vue-cli 项目的前端自动化已经配置好了