Vuejs技术栈从CLI到打包上线实战全解析

前言

本文是自己vue项目实践中的一些总结，针对Vue2及相关技术栈，实践中版本为2.3.3。

开发前须知 vue-cli

在开发前，我们要至少通读一遍vue官方文档和API(看官方文档是最重要的，胜过看五十、一百篇博客),英文阅读能力还行的建议阅读英文文档，中文文档内容会稍落后，还要通读相关的vue-router、axios、vuex等。

一般来说我们都是先利用vue-cli来搭建项目基本架构。

vue-cli官方temaplte地址，我们选择webpack版本，建议看看其文档vue-webpack-boilerplate了解基本用法和项目配置等。

深入地了解vue-cli的webpack配置请查看vue-cli#2.0 webpack 配置分析

打造团队的脚手架

vue-cli虽然强大，但是它有很多个步骤要我们去选择配置，而实际上公司业务很多配置是固定的，比如我们公司规定了要安装vue-router、要使用Standard风格Eslint等，还规定了必须使用sass，这样在vue-cli配置完成后还必须要npm install node-sass和sass-loader，还有axios等也是一定要安装的。所以不应该每次新建一个项目都去一步步选择vue-cli的那些配置然后还要去安装sass等，应该在vue-cli基础上根据公司自身的情况打造团队的脚手架，只需运行脚手架，就可以初始化整个项目。

目录结构

建议在src/目录增加views或pages目录来存放对应路由的组件，添加api目录，根据项目情况增加filters、vuex等目录。components目录存放公共组件或者全局组件。每个组件目录可以将图片等资源放在一起。组件的子组件目录建议命名为children放在父组件目录下。如home组件目录为home/home.vue，子组件banner路径为home/chldren/banner/banner.vue。

静态资源处理

vue-webpack-boilerplate文档中有静态资源处理的详细说明，但发现还有很多人都不知道，因此在这里稍微提一下。

vue-webpack-boilerplate的项目结构中，我们有静态资源两个目录：src/assets和static/

assets目录中的文件会被webpack处理，只支持相对路径形式，assets/logo.png会被编译为./assets/logo.png，不支持/assets/logo.png

在js中，我们可以这样获取文件资源路径

require('./assets/logo.png')

以下带~前缀类似require效果

<img src="~assets/logo.png">

static目录中的静态资源不会被webpack处理，这里适合放一些外部不需要webpack处理的资源，build后的静态资源都会被放进这个目录。

vue组件化

关于vue组件化，360奇舞团前端工程师钟恒的ppt写得非常好，本节内容也是出自其中。ppt中提到组件化带来的新问题：通信、复用、耦合，以及如何解决。

通信

1）props和events：props down，events up

2）函数调用：this.refs

3）组件树: $parent.$parent

4）共享state

5）eventbus

6）vue技术栈之外的如localstorage等

复用

1）冗余：if、else if、else判断执行不同的代码

if(this.type === 'editing') { // some editing code } else if(this.type === 'preview') { // some preview code } else if(this.type === 'present') { // some present code } else { // some base code }

2）包装：slots

// plugin-page.vue <div> <slot name="page"> i am a page </slot> </div> // present-plugin-page.vue <div class="PresetPluginPage"> <plugin-page ref="page"> <h1 slot="page"> i am a present page </h1> </plugin-page> </div> //output <div class="PresetPluginPage"> <div> <h1> i am a present page </h1> </div> </div>

3）继承：mixins

// define a mixin object var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // -> "hello from mixin!" 组件耦合

1）组件耦合带来的问题：

2）解耦

解耦的本质就是将变化分离

一、组件功能单一

// wrong <control-input type="number"></control-input> // right <control-number></control-number>

二、采用稳定的接口

// wrong this.$parent.$parent.$refs['resource-image'].open() // right bus.$emit('open-resource-image')

三、处理好共享的部分

bindEvents (remove) { let method = remove ? 'removeEventListener' : 'addEventListener' window[method]('resize', this.handleResize) }

3）与服务端解耦

this.$http.get('/user/detail') .then(({body}) => { this.user = JSON.parse(body).data }, err => { console.error(err) }) user.detail().then(detail => this.detail = detail) vuex使用中的一些注意事项

1）不要滥用vuex

使用Vuex并不意味着你需要将所有的状态放入Vuex。虽然将所有的状态放到Vuex会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

2）最好在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，子组件可以通过this.$store访问，当状态较多时使用建议mapState辅助函数。

3）polyfill

本次项目中使用了vuex，因此为兼容IE9等低版本，须引入promise的polyfill--es6-promise。npm install后在main.js：

import 'es6-promise/auto' 开发中的常见问题 引入axios

为了和后端进行数据交互，我们一般引入axios库。在main.js中如下将其加入vue的原型中，这样可以在组件中通过this.$http来获取axios：

Object.defineProperty(Vue.prototype, '$http', { value: axios }) // 或者 Object.defineProperty(Vue.prototype, '$axios', { value: axios })