最近要弄一個單頁面應用，於是乎就想到了vue.js，但網上關於vue.js的教程都是一些簡單的資料互相繫結demo，所以最後買了慕課網的實戰教程學習，同時結合 《官方文件》 以下是我的學習筆記。

1 Vue-cli 簡介與安裝

通常建立一個專案，一般的玩法都是會把一些基本的程式碼寫好，類似於建築工人在構建房子是都會搭建腳手架，而Vue就提供 Vue-cli 腳手架，作用是幫助編寫基礎程式碼，它具體到能幫助我們搞掂：

• 目錄結構
• 本地測試
• 程式碼部署
• 熱載入
• 單元測試

進入 Vue-cli github地址，檢視 readme，可以知道它的安裝方法。
在終端中輸入以下命令用以全域性安裝 Vue.cli

npm install -g vue-cli

安裝完之後，可以輸入以下命令，用以生成 Vue-cli 腳手架

vue init <template-name> <project-name>

其中 <template-name> 是指模板名字，比如六個官方模板：

• webpack
• webpack-simple
• browserify
• browserify-simple
• pwa
• simple

webpack，browserify，seaJs，requireJs 都是 JS模組化的方案，其中seaJs，requireJs屬於同一類，都同為線上編譯模組方案；而webpack

，browserify屬於同一類，都同為預編譯模組方案。

• seajs / require : 是一種線上”編譯” 模組的方案，相當於在頁面上載入一個 CMD/AMD 直譯器。這樣瀏覽器就認識了 define、exports、module 這些東西。也就實現了模組化。
• browserify / webpack : 是一個預編譯模組的方案，相比於上面 ，這個方案更加智慧。以webpack為例。首先，它是預編譯的，不需要在瀏覽器中載入直譯器。另外，你在本地直接寫JS，不管是 AMD / CMD / ES6 風格的模組化，它都能認識，並且編譯成瀏覽器認識的JS。
• 而Gulp和Grunt是一種工具，能夠優化前端工作流程。比如自動重新整理頁面、combo、壓縮css、js、編譯less等等。

具體生成的模板內容可移步到github網址上檢視，比如此教程專案所用的webpack模板，其生成的模板內容就是：full-featured Webpack + vue-loader setup with hot reload , linting , testing + css extraction（當然也可以使用自定義模板）
而 <project-name> 顧名思義就是所做專案的名稱了，eg：

vue init webpack sellapp

在建立完這個基本腳手架，我們還需要為其新增一些 node 程式碼庫用以專案依賴，此時進入專案所在目錄，執行 npm install 命令：

npm install

過後可以發現除了模板生成的檔案外還生成了 node_modules 檔案，最後執行 npm run dev 命令，用以搭建本地伺服器執行專案：

npm run dev

2 Vue-cli 檔案目錄說明

經過初步的安裝部署，此時的專案檔案目錄應該含有以下檔案：

其中：

• build 和 config 檔案為 webpack 配置相關的檔案
• node_modules 為專案依賴 node 程式碼庫
• src 為專案原始碼存放的地方
• static 為第三方靜態檔案存放的地方
• .babelrc 檔案為 baber 的設定檔案，用於將ES6編譯成ES5（具體的存放程式碼就是存放在 node_modules檔案程式碼庫中）
• editorconfig檔案顧名思義就是一個設定編輯器編寫格式的檔案，如使用 sublime 編輯器，需要安裝 EditorConfig 外掛，具體關於 editorconfig ，可以參考這兩篇文章，《EditorConfig介紹》以及《SublimeText外掛推薦：程式碼格式管家-EditorConfig》
• eslintrc.js檔案是 eslint 的配置檔案，主要就是編碼風格問題，具體規則問題可以參考《Eslint 規則說明》 這篇文章
• index.html 檔案是專案入口檔案
• package.json 檔案是專案配置檔案，用於描述一個專案

3 專案執行

根目錄中的 index.html 是專案入口檔案，即整個專案最後生成的頁面（它的 css ， js 會動態地插入），而這頁面的主入口 js 檔案位於 src 目錄下的 main.js ，在初始化Demo展示中，可以看到它從 src/compenent 引入 Vue 元件（.vue 檔案）進行拼接從而初始化一個 Vue 例項。
一個 Vue 元件的編寫有三個板塊，分別是：
- <template>
- <script>
- <style>：新增 scoped 屬性，用於限制該 CSS 規則只對該元件有效

編寫好一個元件後，在 <script> 中通過 export default 定義形式，去作為一個元件的匯出。
而當要使用這個元件時，需要先引用該元件，然後使用以下形式進行元件註冊

export default {
    compenent: <templateName>
}

4 模擬後臺資料