vue2.0开发模拟项目一点点总结

这是一篇非详细技术总结。若有错误，欢迎指正与吐槽~。
博主原文vue2.0开发模拟项目一点点总结

所用资源

1. vue2.0

2. vue-resource

3. vue-router

4. better-scroll

5. webpack

6. eslint

7. 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... )