前言：關於頁面上的知識點，如有侵權，請看 這里 。
關鍵詞：小白、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 <chayin@datastory.com.cn>
? 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 文件夾：
-
首先是首頁入口文件 index.html ：
-
接着是項目的核心文件 main.js，所有內容都將通過這個文件來引入到項目中：
-
在 js 中我們看到了組件，所以接着我們看一下組件 App.vue :
-
在 App.vue 中我們看到了 router-view 路由占位符，所以我們可以來到路由文件中，看一下該占位符中會導入什么頁面：
-
從路由映射表中可知會導入組件 helloworld.vue ，於是我們看一下 helloworld.vue ：
-
到此，整個頁面的流程就結束了，最后實際輸出的 index.html 為（大家可以去控制台看一下）：
! 預告
下一篇：Vue系列（3）：vue 是什么？
拜拜~