個人理解：

搭建vue-cli vue腳手架的作用是，寫的專案可以通過webpack 快速打包，加密程式碼，避免原始碼洩露。

腳手架的搭建步驟（摘錄自技術胖部落格：點選開啟技術胖部落格）：

1、前提：安裝了npm（在終端可以用npm -V檢查版本）

2、開啟終端，在當前資料夾下執行命令： npm install vue-cli -g    (-g代表全域性安裝）

3、終端執行命令： vue init <template-name> <project-name>，初始化專案

2018/04/19 補充：今天在一臺新電腦新建一個vue專案時，執行到這一步時出現了這個問題："vue"不是內部或外部檔案，也不是可執行的程式......nodejs也是和之前一樣的裝的，在該資料夾下也檢查了node和npm的版本，都沒問題，系統環境變數的PATH也和之前一樣配置的，寫了node_global檔案的路徑，但就是報錯。所以百度了，按照別人說的方法改的，先在計算機上搜索vue.cmd檔案，然後將搜尋到的此檔案的路徑，放入系統環境變數的PATH中。然後問題就解決了~

<template-name>：表示模板名稱，vue-cli官方為我們提供了5種模板，

webpack-一個全面的webpack+vue-loader的模板，功能包括熱載入，linting,檢測和CSS擴充套件。

webpack-simple-一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發環境。

browserify-一個全面的Browserify+vueify 的模板，功能包括熱載入，linting,單元檢測。

browserify-simple-一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發環境。

simple-一個最簡單的單頁應用模板。

<project-name>：專案名稱這裡隨便起名字，英文小寫

輸入命令後，會詢問我們幾個簡單的選項，我們根據自己的需要進行填寫就可以了。

• Project name :專案名稱 ，如果不需要更改直接回車就可以了。注意：這裡不能使用大寫，所以我把名稱改成了vueclitest
• Project description:專案描述，預設為A Vue.js project,直接回車，不用編寫。
• Author：作者，如果你有配置git的作者，他會讀取。
• Install  vue-router? 是否安裝vue的路由外掛，我們這裡需要安裝，所以選擇Y
• Use ESLint to lint your code? 是否用ESLint來限制你的程式碼錯誤和風格。我們這裡不需要輸入n，如果你是大型團隊開發，最好是進行配置。
• setup unit tests with  Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha，我們這裡不需要，所以輸入n。
• Setup e2e tests with Nightwatch?是否安裝e2e來進行使用者行為模擬測試，我們這裡不需要，所以輸入n。

安裝完成後，執行以下命令。

1、cd vuecliTest  進入我們的vue專案目錄。

2、npm install  安裝我們的專案依賴包，也就是安裝package.json裡的包，如果你網速不好，你也可以使用cnpm來安裝。

3、npm run dev 開發模式下執行我們的程式。給我們自動構建了開發用的伺服器環境和在瀏覽器中開啟，並實時監視我們的程式碼更改，即時呈現給我們。

重要檔案結構：

我認為，初學者，在搭建完腳手架後，主要需要理解五個檔案的作用，下圖是腳手架的目錄結構圖。（之前看了一遍教程，覺得講得不夠簡單明瞭，導致我看完後還是雲裡霧裡，所以自己整理了下，覺得這麼理解比較清楚，僅供參考。）

1、index.html

主頁，一般不需要更改，可以用來引入一些簡單的不需要配置的公共檔案，如公共樣式檔案、Bootstrap檔案等等，引入後會應用到所有的頁面裡。


2、main.js

入口檔案，一般用來引入外掛等複雜的需要配置的檔案，比如router（路由）檔案等。檔案裡下面的程式碼是配置了app.vue元件和app例項。

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

3、index.js

路由核心檔案，主要用來引入、配置公共元件。檔案裡下面的程式碼配置了專案開啟進入的首頁檔案，path為“/”程式碼根檔案。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

4、app.vue

根元件，一般不需要在裡面的<template>模版中寫內容，寫了就會把內容應用到專案中的所有檔案中。所以用來放所有頁面需要用到的元件，比如頂部導航欄、底部footer等等。


5、helloWorld.vue

元件檔案，在index.js裡配置了它為專案開啟後的第一個檔案，可以自由更改名稱等。