这是一篇非详细技术总结。如有错误，欢迎指正与吐槽~。
博主原文vue2.0开发模拟项目一点点总结
所用资源
vue2.0
vue-resource
vue-router
better-scroll
webpack
eslint
stylus
vue-resource
首先要说的是，数据咋来，现在越来越多的数据传输方式都是json数据格式，包括用jquery开发时，也有很好用的$.ajax来进行数据请求与处理，那么vue-resource提供了一种类似的，并且api更加简洁易用，压缩后文件更小。配合ES 6的Lambda写法，更加优雅
这里提供对照着一个实例来顺一下：
this.$http.get('/api/seller').then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.seller = Object.assign({}, this.seller, response.data);
}
});通过 this.$http.get 来定义通过vue实例来发送get请求，然后通过then后面的回调函数将请求成功的数据接收，通过状态码来判断是否成功以及复制给vue的数据对象。由于这里是用的mock数据（模拟后台数据），所以用的模拟状态码。
同时，这里省略了errorcallback的定义，正常开发中需要进行定义，甚至可以利用vue-resource的inteceptor进行体验优化，比如定义请求时的loading动画界面。在vue中即可以提取出loading组件。
Object.assign()
在这里科普一下Object.assign()的用法。官方解释为：可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。
Object.assign(target, ...sources)this.seller = Object.assign({}, this.seller, response.data);对应到上面的实例，即将vm.seller属性和请求返回数据对象合并到空对象，然后赋值给vm.seller这里加上this.seller 即提供了一种可扩展的机制，倘若原来的属性中有预定义的其他属性。这种写法比较常见，比如写js时自定义一个方法，ES6之前传参设置默认值（ES6中允许函数参数设置默认值，更加便捷）。
另外需要注意的是Object.assign()方法只会拷贝源对象自身的并且可枚举的属性到目标身上。也就意味着继承属性和不可枚举属性是不能拷贝的，而且拷贝是对象的属性的引用而不是对象本身。
vue-router
那接下来聊聊页面路由，vue提供了一个vue-router ,顾名思义，这个东西就是用来进行路由分发的。
通过一个简单的示例来理解一下：
<!-- 导航 -->
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>
<!-- 路由出口 组件渲染容器 -->
<router-view></router-view>// 定义路由
const routes = [
{ path: '/home', component: home },
{ path: '/about', component: about }
];
// 创建 router实例，将路由配置传入
const router = new VueRouter({
routes: routes
});
// 挂载
new Vue({
el: '#app',
template: '<App/>',
router: router,
components: { App }
});vue 通过 to 属性来指定链接，导航点击时组件渲染容器就会发生相应的变化，渲染不同的组件。这对于简单的单页面应用已经够用了，在此阶段还没有用过 vuex ，这个好像应对复杂的单页面进行状态管理更优雅一些。
组件间通讯
vue是进行组件式开发，故组件间通讯是必不可少的。vue提供了一种方式，即在子组件定义props来传递父组件的数据对象。
<!-- App.vue -->
<v-header :seller="seller"></v-header>// header.vue
props: {
seller: {
type: Object
}
}像上面这样就可以在 header 组件中使用seller对象了。
那么如果子组件想传到父组件呢？
// food.vue 子组件
this.$emit('eventCartadd', event.target);<!-- goods.vue 父组件 -->
<food v-on:eventCartadd="_drop"></food>事件派发： vm.$emit 附加参数传给监听器回调
组件提取管理
以前进行pc端网页开发时可能采取过模块化开发，对页面进行模块划分，然后尽量提高复用性与可维护性，以前大致写过一篇粗浅的文章一个简单的电商网站模块化开发总结
那现在用vue进行组件式开发，将组件化开发表现到极致。现在，页面结构拆分分析就是极其重要的一环。
vue开发中会有一个src/components目录,这里是存放vue组件的，即**.vue文件，组件提取拆分的原则简单的可以理解为把一块儿内容可复用，把样式、功能相近的区块抽象成一个组件，另外组件中用到的图片等资源就近维护，即可以考虑在组件文件夹中新建images文件夹。
另外如果项目复杂，也可以更深层次的拆分，比如将比较通用、不包含业务逻辑的基础组件单独管理，将业务组件 放在components进行管理。当然也不是组件存放拆分的越细越好，如果只是十几个二十几个组件，存放管理的过细的话，同样增加了目录结构的管理，可以考虑直接同级存放。
另外抽离组件时要尽量遵循单一职责原则，复用性更高，不要设置额外的margin等影响布局的东西。
CSS预处理器
可能有很多人在说CSS预处理器的不好，增加了学习成本，本末倒置，css使用已经很艰难了，哪有力气学习预处理器。
我个人观点是，它可以更好的帮助开发，提升开发效率，节省编写css时的代码量，当然直接用css也能实现，不过当遇上组件化开发时，会发现有很沉重css代码量，那利用预处理器的mixin，函数等可以更高效的解决一些问题。况且学习成本并没有想象中的那么高，网上不经常有很多10分钟入门less之类的文章，其实掌握了基本的用法就够用了。
这里举一个栗子?：
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)利用stylus可以很方便的写一个一像素边框
关于eslint
eslint 是一个js代码风格检查器，配合vue-cli脚手架中的热更新，可以很方便的定位和提示错误。很多新手对于频繁报错很是不爽，很急躁，感觉总是去处理这些错误，耽误开发时间，觉得有这些时间多去学点vue多好。
我的观点是，使用eslint是对开发有好处的，且不说在公司多人协作开发时代码风格可以保持一致，可以很方便的阅读他人的代码。单就个人开发的话，自己写的也会越来越规范，代码也越来越漂亮。想一想写一手漂亮的代码是多么愉快的事情。况且那些报错都有对应的官网链接也有英文提示，可以翻译也可以去官网查。查几次之后就会发现错误就那么几种，而且自己越写越整齐规范，错误也就逐渐消失了。对于以后的开发或是多人协作是收益很大的。
关于其他
vue2.0踩坑
vue2.0 相较 1.0 精简了很多api，例如：
1. $index废除 2. transition过渡状态变为4种状态 3. v-el废除 。具体的可以移步官方文档传送门
better-scroll
一个超级好用的移动端滚动插件，github：(https://github.com/ustbhuangy… )
手机测试网页技巧
将localhost换成自己的ip，windows在命令行执行ipconfig查看，mac执行ifconfig查看。
然后复制地址栏地址，进入草料二维码网站（cli.im），然后生成二维码，然后用手机扫一扫就可以查看了，前提是，你手机和电脑必须在同一个局域网。
css书写顺序
先写display（布局的），宽高（位置的，影响重绘的），颜色（可被继承的）
github
github:(https://github.com/EryouHao/v… )
