使用Vue.js從零構建GitHub項目瀏覽器

最近幾個月在學習Vue.js並把它應用到實際項目中，在通讀官方中文教程以後，前期學習期間Create a GitHub File Explorer Using Vue.js這篇文章給我了較好的啓發。因而結合本身最新的學習成果寫下這篇總結。

源碼地址：github-file-explorer

See DEMO

開發環境搭建

參考官方教程構建大型應用中提到的腳手架工具vue-cli，我初次瞭解到了webpack，vue-cli是一個簡單的腳手架，能夠幫助你快速地構建 Vue 項目：單文件 Vue 組件，熱加載，保存時檢查代碼，單元測試等功能。vue-cli中有五個模板，我想用webpack-simple模板做爲demo的開發環境再好不過了。

$> npm install vue-cli -g

建立第一個Vue應用

$> vue init webpack-simple github-file-explorer

$> cd github-file-explorer

$> npm install

$> npm run dev

打開瀏覽器，輸入http://localhost:8080

Boom，你會發現咱們建立的第一個Vue應用啓動了。

更改默認端口

webpack-simple集成了webpack-dev-server，默認啓動的端口爲8080，端口容易衝突。

翻閱文檔，修改配置文件package.json，更換端口爲8090。

"scripts": {
  "dev": "webpack-dev-server --inline --hot --port 8090",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},

熱重載

webpack結合vue-loader以及vue-hot-reload-api實現了熱重載，讓開發體驗極速提高。保存秒級更新，不再用reload瀏覽器了。那些年咱們都習慣了F5。

組件化開發體驗

• 項目結構

• 引入資源

• 簡單vue指令的使用

• 計算屬性

• 數據觀察

• 組件間數據傳遞

項目結構

引入資源

在index.html中引入資源，採用jsdelivrCDN加速。

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Octicons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/octicons/3.5.0/octicons.css">

簡單vue指令的使用

• v-model 表單控件綁定

• v-if 根據表達式的值的真假條件渲染元素

• v-for 列表渲染

• @click 是v-on:click的簡寫，綁定事件監聽

計算屬性

computed能夠對Vue實例上的數據進行再計算，根據需求，再次拼接fullRepoUrl。

fullRepoUrl: function() {
  return this.username + '/' + this.repo;
}

數據觀察

watch能夠觀察每個Vue實例上的數據變更。當數據發生變化的時候會觸發方法。經過這個機制咱們能夠實現更換repo來觸發列表更新。

watch: {
  repo: function(newVal, oldVal) {
    this.path = '/';
    this.getFiles();
  }
}

組件間數據傳遞

組件（Component）是Vue.js最強大的功能之一。

在官方教程中組件佔了絕大部份內容，說明組件在Vue中佔有很重要的地位。

下圖是我對github-file-explorer構建的簡單組件鏈。

main.js，是Vue的根實例，它擴展了App.vue做爲父組件。

import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'

Vue.use(VueResource)

new Vue({
  el: 'body',
  components: { App }
})

• A，App做爲父組件，建議App中不寫業務邏輯，做爲應用的layout，根據需求，作一個佈局。好比：Header/Container/Sidebar。

• B，Github是App組件的子組件，同時也是FileExplorer組件的父組件，實現form表單獲取github文件API列表。

• C，FileExplorer組件爲Github組件的子組件，實現列表清單。

組件關係：App > Github > FileExplorer

父組件與子組件間通信(使用Props傳遞數據)：

組件實例的做用域是孤立的。這意味着不能而且不該該在子組件的模板內直接引用父組件的數據。可使用 props 把數據傳給子組件。

父組件Github經過動態綁定Props向子組件傳遞數據

<file-explorer :username="username" :repo="repo"></file-explorer>

子組件FileExplorer經過Props接收父組件傳遞的數據

props: {
  username: {
    type: String,
    required: true
  },
  repo: {
    type: String,
    required: true
  }
},

使用Vue插件

vue-resource，經過 XMLHttpRequest 或 JSONP 發起請求並處理響應

經過vue-resource請求github的API

getFiles: function() {
  this.$http.get('https://api.github.com/repos/' + this.fullRepoUrl + '/contents' + this.path,
    function(data) {
      this.files = data;
    }
  );
}

使用Vue Devtools提高開發效率

下圖是對github-file-explorer組件鏈做用域的簡單演示

Vue Devtools能夠大大提高Vue應用的調試效率，不再用{{ $data | json }}
打印調試數據了，而且它還能夠調試Vuex，當你在使用Vuex時候可能對數據流轉很困惑。那麼使用Vue DevTools中的Vuex調試工具能夠解決你的煩惱。關於Vuex的使用後續我會再寫篇文章總結下，很好用的狀態管理插件。不過Vue Devtools目前只有Chrome。意味着你只能在Chrome瀏覽器中才能使用Vue Devtools。

最終效果圖

原文：使用Vue.js從零構建GitHub項目瀏覽器