【转】手摸手，带你用vue撸后台 系列一

前言

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

目录结构

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

这里来简单讲一下src文件

api 和 views

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

Paste_Image.png

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

Paste_Image.png

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

components

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

Paste_Image.png

store

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

---

webpack

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

jquery

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

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

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

alias

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

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，绝对有种飞通常的感受。效果如图：

eslintGif.gif

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

首先安装eslint插件

eslint1.png

安装并配置完成 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。

---

封装axios

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

import axios from 'axios'; import { Message } from 'element-ui'; import store from '../store'; import router from '../router'; export default function _fetch(options) { return new Promise((resolve, reject) => { const instance = axios.create({ baseURL: process.env.BASE_API, //经过env环境变量切换api地址 // timeout: 2000, //请求超时时间 headers: { 'X-Token': store.getters.token }//后台项目，每一个请求都须要token，判断权限 }); instance(options) .then(response => { const res = response.data; //我司经过自定义code来判断 如：code不等于20000就被试为异常 if (res.code !== 20000) { console.log(options); // for debug Message({ message: res.message, type: 'error', duration: 5 * 1000 }); // 50014:Token 过时了 50012:其余客户端登陆了 50008:非法的token if (res.code === 50008 || res.code === 50014 || res.code === 50012) { Message({ message: res.message, type: 'error', duration: 5 * 1000 }); // 登出 store.dispatch('FedLogOut').then(() => { router.push({ path: '/login' }) }); } reject(res); } resolve(res); }) .catch(error => { Message({ message: '发生异常错误,请刷新页面重试,或联系程序员', type: 'error', duration: 5 * 1000 }); console.log(error); // for debug reject(error); }); }); }

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

好比后台项目，每个请求都是要带token来验证权限的，这样封装如下的话咱们就不用每一个请求都手动来塞token，或者来作异常处理，一劳永逸。
并且由于咱们的api是更具env环境变量动态切换的，若是之后线上出现了bug，咱们只要将配置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环境，就是所谓的测试环境。因此咱们就要简单的修改一下代码。其实很简单就是设置不一样的环境变量

"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": "NODE_ENV=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())

效果图

analyzer.png

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

---

先后端交互

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

跨域问题

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

先后端的交流问题

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

Paste_Image.png

url地址，须要传是没参数，须要的传参类型，返回的数据格式什么都一清二楚了，咱们大前端终于不用再看后端的脸色了~

前端自行mock

若是后端不愿来帮你mock数据的话，前端本身来mock也是很简单的。你可使用mock server 或者使用mockjs+rap也是很方便的。

---

iconfont

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

iconfont.png

---

router-view

different router the same component vue。真实的业务场景中，这种状况不少。好比

router-view.png

我建立和编辑的页面使用的是同一个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 加打包镜像，一共是耗时以下

Paste_Image.png

仍是属于能接受时间的范围。
主站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撸后台 系列一，下一篇会主要讲讲搭建用户系统，二次登陆，权限验证这些东西，有时间的话，还会写一下基于element-ui动态换肤的实现方案。或者你们能够留言说说想要看一些什么。

做者：花裤衩coder 连接：http://www.jianshu.com/p/c315c9211146 來源：简书 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。