vue-cli虽然强大，但是它有很多个步骤要我们去选择配置，而实际上公司业务很多配置是固定的，比如要安装vue-router、规定了必须使用sass，这样在vue-cli配置完成后还必须要npminstallnode-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
官方地址查看官网的安装使用说明，
直接安装或者更新：
npminstallvux--save

安装vux-loader
npminstallvux-loader--save

安装less-loader以正确编译less源码
npminstallless-loader--save-dev

vux2必须配合vux-loader使用,请在build/webpack.base.conf.js里参照如下代码进行配置：
constvuxLoader=require('vux-loader')
constwebpackConfig=originalConfig//原来的module.exports代码赋值给变量webpackConfig

module.exports=vuxLoader.merge(webpackConfig,{
plugins:['vux-ui']
})

6.安装sass
安装node-sass和sass-loader
npminstallnode-sass--save-dev
npminstallsass-loader--save-dev

vue-cli生成的项目，已经默认加入了处理sass的loader，只需要这样即可




7.添加Fastclick移除移动端点击延迟
安装fastclick
npminstallfastclick--save

在main.js中引用
importFastClickfrom'fastclick'
FastClick.attach(document.body)

8.安装vue-scroller
安装
cnpminstallvue-scroller-S

使用,在main.js中引用
importVueScrollerfrom'vue-scroller'
Vue.use(VueScroller)

使用方法可以参考vue-scroller
9.初始化浏览器样式
下载地址：cssreset
10.移动端rem布局
移动端rem布局方案：flexible.js
使用参考资料：使用Flexible实现手淘H5页面的终端适配    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！