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