vue-cli虽然强大，但是它有很多个步骤要我们去选择配置，而实际上公司业务很多配置是固定的，比如要安装vue-router、规定了必须使用sass，这样在vue-cli配置完成后还必须要npm install node-sass和sass-loader，还有axios等也是一定要安装的。所以不应该每次新建一个项目都去一步步选择vue-cli的那些配置然后还要去安装sass等，应该在vue-cli基础上根据公司自身的情况打造团队的脚手架，只需运行脚手架，就可以初始化整个项目。
GitHub地址是：vue-cli整合vux，打造webapp的项目脚手架
技术栈
Vue.js : 前端页面展示
Vuex : 全局状态通信
axios：网络请求
Vue-router：路由跳转,实现单页的核心
Vux：移动端UI组件库
fastclick：去除点击延时
vue-scroller：刷新组件
reset.css：初始化浏览器样式
flexible.js：移动端rem布局
打造目录结构
1.通过vue-cli，初始化vue项目
可以参考我的上一篇文章vue-cli入门（一）-使用vue-cli搭建项目
初始化项目结构
其中，src是项目文件存放目录，src/assets和static/是两个存放静态资源的目录，之间的区别是：static目录中的静态资源不会被webpack处理，这里适合放一些外部不需要webpack处理的资源，build后的静态资源都会被放进这个目录。
2.配置Vuex
在src目录中，新建一个store目录，用于存放全局状态，可以参考文章vue进阶 - vuex安装及使用
src目录
3.配置Vue-router
通过vue-cli，初始化vue项目，默认是安装了Vue-router，我们不需要在另外安装，使用可以参考我的另一篇文章vue进阶 - vue-router安装及使用
4.配置axios
可以参考我的另一篇文章vue进阶 - axios安装及使用
5.配置Vux
官方地址查看官网的安装使用说明，
直接安装或者更新：
npm install vux --save
安装vux-loader
npm install vux-loader --save
安装less-loader以正确编译less源码
npm install less-loader --save-dev
vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置：
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
6.安装sass
安装node-sass和sass-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
vue-cli生成的项目，已经默认加入了处理sass的loader，只需要这样即可
<style lang="scss" scope>
</style>
7.添加Fastclick移除移动端点击延迟
安装fastclick
npm install fastclick --save
在main.js中引用
import FastClick from 'fastclick'
FastClick.attach(document.body)
8.安装vue-scroller
安装
cnpm install vue-scroller -S
使用,在main.js中引用
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
使用方法可以参考vue-scroller
9.初始化浏览器样式
下载地址：cssreset
10.移动端rem布局
移动端rem布局方案：flexible.js
使用参考资料：使用Flexible实现手淘H5页面的终端适配
网友评论