vue项目基础结构
一个vue的项目，我觉得最小的子集其实就是{vue,vue-router,component}，vue作为基础库，为我们提供双向绑定等功能。vue-router连接不同的"页面"，component作为样式或者行为输出，你可以通过这三个东西来实现最基本的静态SPA网站。当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举。
1.vue-cli：搭建基本的vue项目骨架，脚手架工具
2.sass-loader&node-sass:我是使用的sass作为样式的预编译工具，两者缺一不可，大家也可以自行选择，less,stylus都可以
3.postcss:实现响应式布局的关键，px=>rem。大漠已经提出了基于vw,vh的布局方案，不过我暂时持观望态度。
4.vuex:管理复杂的数据流向，状态机工具，特化的Flux
5.vuex-persistedstate:将vuex中state持久化的工具
6.vue-router:实现SPA间“页面”之间的跳转
7.vue-lazyload:实现图片的懒加载，优化http传输性能
8.vue-awesome-swiper:轮播功能的实现及一些特殊切换效果的完成
9.better-scroll:实现列表滚动及父子组件间的滚动问题
10.axios:http工具，实现向API请求数据，以及拦截器的实现
11.fastclick:解决300ms延迟的库
以上这些，都是我觉得一个中大型的vue项目需要用到的，还有一些比如我在实现图片上传中用到了jsx的语法，需要babel-jsx这样的东西，不具有普适性，就不例举了。
下面简述一下上面说到的这些东西，有的东西会单独的来出来细说：
1.vue-cli：
https://github.com/vuejs/vue-cli
脚手架工具，当我们选择vue作为我们的开发技术栈以后，就要开始为我们的项目搭建目录及开发的环境。安装好node以后，通过以后命令进行安装
npm install -g vue-cli 将vue-cli安装到全局环境
vue init webpack my-vue-demo 创建基于webpack模板的名为my-vue-demo文件名的vue项目
这里的模板有6中，不过我们比较常用的就是webpack了。
期间你会看到有一些例如e2e这样的单元测试的工具和ESLint检测代码质量的工具，我觉得都是可以不必安装的。
那么，其实我们最关心的就是在src文件夹下面的内容了。可以看下图
上图就是一个在刨除vue-cli的基本结构，在项目上比较成熟的vue骨架了。
2&3 :sass,postcss
直接写css得洪荒时代已经过去了，预编译的样式处理器帮助我们解放了生产力，提高了效率。sass,less,stylus各有优缺，也各有信徒。
要使用sass的话，你需要安装一下sass-loader和node-sass，不过node-sass不是很好装，被墙的厉害，建议还是用taobao的镜像。如果安装完成后还是报错无法解析的话，你可能就需要去webpack.base.conf.js里去看看是否设置好了对应的loader。
postcss的常用功能
px2rem => 可以帮助我们实现px到rem单位的转换，只需要你定义好相应的转换标准就可以了。
autoprefixer => 兼容性的处理postcss也可以帮我们处理好。
//vue-loader.conf.js module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), postcss: [ require('autoprefixer')({ browsers: ['iOS >= 7', 'Android >= 4.1'] }), require('postcss-px2rem') ({ remUnit: 64 }) ] }