前言：關於頁面上的知識點，如有侵權，請看 這裡 。

關鍵詞：小白、Vue 安裝、Vue目錄結構、Vue 構建頁面流程

? 初學者安裝 vue 用什麼好 大家都知道，學 Vue 最好還是去官網學，官網寫得炒雞詳細，如果你能把官網上的知識點都看完看懂，把上面的例子都敲一遍，你怎麼著也算是。。。認識 Vue 了。。。畢竟學會什麼的，你總要做個一個完整專案才算吧。

但是！如果你和我一樣也是‘傻白甜’的話（那時候我專心學習原生，立志打好基礎先，學過node，但是還沒用過什麼框架，也沒用過什麼構建工具，什麼都懵懵懂懂的），vue 的安裝我是不建議你去看官網的，因為我是建議初學者學 vue 的時候，是用腳手架的，一方面在公司搭建 vue 專案時都是用腳手架的，早點熟悉填坑是好事。而且這樣你就可以一邊學，一邊做一個完整的專案出來了。如果從我這一點出發的話，看起來官網也是建議初學者不要在他那裡學習安裝滴。。。不信你瞅（開玩笑的啦~）

所以我那時候學習用 vue-cli 都是在 菜鳥教程 上學的，因為教程裡面有對腳手架構建後的目錄結構有做解說，所以對一些沒用過 webpack 的初學者很友好。

插段小故事，其實當初，我是懷著一腔熱血想要把 webpack 和 vue 一起學了的，最好能一口吃成大胖子，於是我堅決不用 Vue 官方提供的 CLI。先是用一個下午千辛萬苦粗略的弄懂了 webpack，搭好了環境，引入了 Vue，安裝資源，開始了 <template>，然後就開始報錯報錯，百度百度，解決解決，最後花了一天終於弄好了，感動到哭！

乾貨：

• 學習 webpack 的時候，還是推薦看官網，我當時還一起看了
  擁抱webpack——最詳細填坑筆記
• 上面之所以報錯呢，是因為 vue 有不同的構建版本，在 webpack 中預設是隻包含執行時的版本 (vue.runtime.js)，不包含編譯器，而使用 template 要用到編譯器，所以要在 webpack 配置中引入完整版（vue.js = vue.common.js + compiler.js）。通過這個報錯我也深刻的理解了 vue 的不同構建版本。

雖然我花了不少時間，但是覺得學到了挺多的。但是呢初學時浪費的這些時間真的會感覺挫敗，覺得自己是沒人帶的，好慘慘。所以不如腳手架學起來爽。 建議可以先用腳手架把 vue 弄起來，再回過頭瞭解 webpack 和 vue 的不同構建版本就行，人生已經如此的艱難，有些事情能簡單點就簡單點吧？

回到正題。

1. Vue 安裝

1.  全域性安裝 vue-cli
$ cnpm install --g vue-cli

2.  建立一個基於 webpack 模板的新專案，然後預設一路回車就行
$ vue init webpack my-project
This will install Vue 2.x version of the template.

? Project name my-project
? Project description A Vue.js project
? Author Chayin <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-project".

   To get started:

      cd my-project
      npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

3. 進入專案
$ cd my-project

4. 執行
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

5. 開啟瀏覽器訪問訪問 http://localhost:8080/#/，訪問結果如下：

2. 目錄結構

開啟專案目錄，可以看到這樣的目錄結構：

├── build ----------------------------  專案構建(webpack)相關程式碼，一般情況下我們不需要動
├── config ---------------------------  配置目錄，包括埠（8080）等。初學可以使用預設的
├── node_modules ---------------------  npm 載入的專案依賴模組
├── src ------------------------------  這個是我們最應該關注的目錄，基本上要做的事情都在這個目錄裡。
├──├── assets ------------------------  放置一些圖片，如網頁標題logo等
├──├── components --------------------  放置頁面元件
├──├── router ------------------------  路由
├──├── App.vue -----------------------  專案入口檔案
├──├── main.js -----------------------  專案核心檔案
├── static ---------------------------  靜態資源目錄。
├── test -----------------------------  初始測試目錄，可刪除。但是我們一般都是放mock資料的。
├── .xxxx檔案 -------------------------  這些是一些配置檔案，包括語法配置，git配置等。
├── index.html -----------------------  首頁入口檔案，你可以新增一些 meta 資訊或統計程式碼啥的。
├── package.json ---------------------  專案配置檔案，不解釋。
├── README.md ------------------------  專案的說明文件，markdown 格式

3. Vue 構建頁面流程

接下來我們來看一下專案裡面的檔案，瞭解頁面是怎麼構建出來的，我們主要關注 index.html 和 src 資料夾：

1. 首先是首頁入口檔案 index.html ：

2. 接著是專案的核心檔案 main.js，所有內容都將通過這個檔案來引入到專案中：

3. 在 js 中我們看到了元件，所以接著我們看一下元件 App.vue :

4. 在 App.vue 中我們看到了 router-view 路由佔位符，所以我們可以來到路由檔案中，看一下該佔位符中會匯入什麼頁面：

5. 從路由對映表中可知會匯入元件 helloworld.vue ，於是我們看一下 helloworld.vue ：

6. 到此，整個頁面的流程就結束了，最後實際輸出的 index.html 為（大家可以去控制檯看一下）：

! 預告 下一篇：Vue系列（3）：vue 是什麼？ 拜拜~