手摸手，带你用vue撸后台系列一(基础篇)

时间 2019-11-06

标签 vue 后台系列基础繁體版

原文原文链接

完整项目地址：vue-element-admin
系类文章二：手摸手，带你用vue撸后台系列二（登陆权限篇）
系类文章三：手摸手，带你用vue撸后台系列三(实战篇）
系类文章四：手摸手，带你用vue撸后台系列四(vueAdmin 一个极简的后台基础模板)
系类文章：手摸手，带你优雅的使用 icon
系类文章：手摸手，带你封装一个vue componentjavascript

前言

说好的教程终于来了，第一篇文章主要来讲一说在开始写实际业务代码以前的一些准备工做吧，但这里不会教你 webpack 的基础配置，热更新原理是什么，webpack速度优化等等，有需求的请自行 google，相关文章已经不少了。html

目录结构

├── 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

这里来简单讲一下src文件前端

api 和 views

简单截取一下公司后台项目，如今后台大概有四五十个 api 模块

如图可见模块有不少，并且随着业务的迭代，模块还会会愈来愈多。
因此这里建议根据业务模块来划分 views，而且将views 和 api 两个模块一一对应，从而方便维护。以下图：
vue

如 article 模块下放的都是文章相关的 api，这样无论项目怎么累加，api和views的维护仍是清晰的，固然也有一些全区公用的api模块，如七牛upload，remoteSearch等等，这些单独放置就行。java

components

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

store

这里我我的建议不要为了用 vuex 而用 vuex。就拿我司的后台项目来讲，它虽然比较庞大，几十个业务模块，几十种权限，但业务之间的耦合度是很低的，文章模块和评论模块几乎是俩个独立的东西，因此根本没有必要使用 vuex 来存储data，每一个页面里存放本身的 data 就行。固然有些数据仍是须要用 vuex 来统一管理的，如登陆token,用户信息，或者是一些全局我的偏好设置等，仍是用vuex管理更加的方便，具体固然仍是要结合本身的业务场景的。总之仍是那句话，不要为了用vuex而用vuex！react

webpack

这里是用 vue-cli 的 webpack-template 为基础模板构建的，若是你对这个有什么疑惑请自行google，相关的配置绍其它的文章已经介详细了，这里就再也不展开了。简单说一些须要注意到地方。

jquery (本项目已移除)

管理后台不一样于前台项目，会常常用到一些第三方插件，但有些插件是不得不依赖 jquery 的，如市面不少富文本基都是依赖 jquery 的，因此干脆就直接引入到项目中省事(gzip以后只有34kb，并且常年from cache,不要考虑那些吹毛求疵的大小问题，这几kb和提升的开发效率根本不能比)。可是若是第三方库的代码中出现$.xxx或jQuery.xxx或window.jQuery或window.$则会直接报错。要达到相似的效果，则须要使用 webpack 内置的 ProvidePlugin 插件，配置很简单，只须要jquery

new webpack.ProvidePlugin({
  $: 'jquery' ,
  'jQuery': 'jquery'
})

这样当 webpack 碰到 require 的第三方库中出现全局的$、jQeury和window.jQuery 时，就会使用 node_module 下 jquery 包 export 出来的东西了。webpack

alias

当项目逐渐变大以后，文件与文件直接的引用关系会很复杂，这时候就须要使用alias 了。
有的人喜欢alias 指向src目录下，再使用相对路径找文件ios

resolve: {
  alias: {
    '~': resolve(__dirname, 'src')
  }
}

//使用
import stickTop from '~/components/stickTop'

或者也能够

alias: {
  'src': path.resolve(__dirname, '../src'),
  'components': path.resolve(__dirname, '../src/components'),
  'api': path.resolve(__dirname, '../src/api'),
  'utils': path.resolve(__dirname, '../src/utils'),
  'store': path.resolve(__dirname, '../src/store'),
  'router': path.resolve(__dirname, '../src/router')
}

//使用
import stickTop from 'components/stickTop'
import getArticle from 'api/article'

没有好与坏对与错，纯看我的喜爱和团队规范。

ESLint

不论是多人合做仍是我的项目，代码规范是很重要的。这样作不只能够很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，我的推荐 eslint+vscode 来写 vue，绝对有种飞通常的感受。效果如图：

每次保存，vscode就能标红不符合eslint规则的地方，同时还会作一些简单的自我修正。安装步骤以下：

首先安装eslint插件

安装并配置完成 ESLint 后，咱们继续回到 VSCode 进行扩展设置，依次点击文件 > 首选项 > 设置打开 VSCode 配置文件,添加以下配置

"files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       { "language": "vue", "autoFix": true }
     ],
     "eslint.options": {
        "plugins": ["html"]
     }

这样每次保存的时候就能够根据根目录下.eslintrc.js你配置的eslint规则来检查和作一些简单的fix。这里提供了一份我平时的eslint规则地址，都简单写上了注释。每一个人和团队都有本身的代码规范，统一就行了，去打造一份属于本身的eslint 规则上传到npm吧，如饿了么团队的 config，vue的 config。

vscode 插件和配置推荐

封装 axios

咱们常常遇到一些线上的bug，但测试环境很难模拟。其实能够经过简单的配置就能够在本地调试线上环境。
这里结合业务封装了axios ，线上代码

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 建立axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

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

// respone拦截器
service.interceptors.response.use(
  response => response,
  /**
  * 下面的注释为经过response自定义code来标示请求状态，当code返回以下状况为权限有问题，登出并返回到登陆页
  * 如经过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       Message({
  //         message: res.message,
  //         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

import request from '@/utils/request'

//使用
export function getInfo(params) {
  return request({
    url: '/user/info',
    method: 'get',
    params
  });
}

好比后台项目，每个请求都是要带 token 来验证权限的，这样封装如下的话咱们就不用每一个请求都手动来塞 token，或者来作一些统一的异常处理，一劳永逸。
并且由于咱们的 api 是根据 env 环境变量动态切换的，若是之后线上出现了bug，咱们只需配置一下 @/config/dev.env.js 再重启一下服务，就能在本地模拟线上的环境了。

module.exports = {
    NODE_ENV: '"development"',
    BASE_API: '"https://api-dev"', //修改成'"https://api-prod"'就好了
    APP_ORIGIN: '"https://wallstreetcn.com"' //为公司打个广告 pc站为vue+ssr
}

妈妈不再用担忧我调试线上bug了。
固然这里只是简单举了个例子，axios还能够执行多个并发请求，拦截器什么的，你们自行去研究吧。

多环境

vue-cli 默认只提供了dev和prod两种环境。但其实正真的开发流程可能还会多一个sit或者stage环境，就是所谓的测试环境和预发布环境。因此咱们就要简单的修改一下代码。其实很简单就是设置不一样的环境变量

"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",

以后在代码里自行判断，想干就干啥

var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv

新版的 vue-cli 也内置了 webpack-bundle-analyzer 一个模块分析的东西，至关的好用。使用方法也很简单，和以前同样封装一个 npm script 就能够。

//package.json
 "build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js"

//以后经过process.env.npm_config_report来判断是否来启用webpack-bundle-analyzer

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())

效果图

webpack-bundle-analyzer这个插件仍是颇有用的，对后期的代码优化什么的，最重要的是它够装逼~

先后端交互

每一个公司都有本身一套的开发流程，没有绝对的好与坏。这里我来说讲我司的先后端交互流程。

跨域问题

首先先后端交互不可避免的就会遇到跨域问题，我司如今全是用 cors来解决的，若是你司后端嫌麻烦不愿配置的话，dev环境也能够经过
webpack-dev-server的proxy来解决，开发环境用nginx反代理一下就行了，具体配置这里就不展开了。

先后端的交互问题

其实你们也知道，平时的开发中交流成本占据了咱们很大一部分时间，但先后端若是有一个好的协做方式的话能解决不少时间。我司开发流程都是先后端和产品一块儿开会讨论项目，以后后端根据需求，首先定义数据格式和api，而后 mock api 生成好文档，咱们前端才是对接接口的。这里推荐一个文档生成器 swagger。
swagger是一个REST APIs文档生成工具，能够在许多不一样的平台上从代码注释中自动生成，开源，支持大部分语言，社区好，总之就是一个强大，以下图的api 文档(swagger自动生成，ui忽略)

api 地址，须要传是没参数，须要的传参类型，返回的数据格式什么都一清二楚了。

前端自行mock

若是后端不愿来帮你 mock 数据的话，前端本身来 mock 也是很简单的。你可使用mock server 或者使用 mockjs + rap 也是很方便的。
不久前出的 easy-mock也至关的不错，还能结合 swagger。
咱们大前端终于不用再看后端的脸色了~

iconfont

element-ui 默认的icon不是不少，这里要安利一波阿里的iconfont简直是神器，不论是公司项目仍是我的项目都在使用。它提供了png,ai,svg三种格式，同时使用也支持unicode，font-class，symbol三种方式。因为是管理后台对兼容性要求不高，楼主平时都喜欢用symbol，晒一波我司后台的图标(都是楼主本身发挥的)。

详细具体的使用能够见文章手摸手，带你优雅的使用 icon

router-view

different router the same component vue。真实的业务场景中，这种状况不少。好比
我建立和编辑的页面使用的是同一个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()
    }
 }

优化

有些人会以为如今构建是否是有点慢，我司如今技术栈是容器服务，后台项目会把dist文件夹里的东西都会打包成一个docker镜像，基本步骤为

npm install
npm run build:prod
加打包镜像，一共是耗时以下

仍是属于能接受时间的范围。
主站PC站基于nodejs、Vue实现服务端渲染，因此不只须要依赖nodejs，并且须要利用pm2进行nodejs生命周期的管理。为了加速线上镜像构建的速度，咱们利用taobao源 https://registry.npm.taobao.org 进行加速, 而且将一些常见的npm依赖打入了基础镜像，避免每次都须要从新下载。
这里注意下建议不要使用cnpm install或者update 它的包都是一个link，反正会有各类诡异的bug，这里建议这样使用

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

若是你以为慢仍是有可优化的空间如使用webpack dll 或者把那些第三方vendor单独打包 external出去，或者我司如今用的是http2 可使用AggressiveSplittingPlugin等等，这里有需求的能够自行优化。

占坑

常规占坑，这里是手摸手，带你用vue撸后台系列。
完整项目地址：vue-element-admin
系类文章二：手摸手，带你用vue撸后台系列二（登陆权限篇）
系类文章三：手摸手，带你用vue撸后台系列三(实战篇）
系类文章四：手摸手，带你用vue撸后台系列四(vueAdmin 一个极简的后台基础模板)
系类文章：手摸手，带你优雅的使用 icon
系类文章：手摸手，带你封装一个vue component
楼主我的免费圈子。

手摸手，带你用vue撸后台 系列一(基础篇)

前言