Vue系列（2）：Vue 安裝

Vue · 發表 2018-10-05 18:02:00

摘要：前言：關於頁面上的知識點，如有侵權，請看這裡。關鍵詞：小白、Vue 安裝、Vue目錄結構、Vue 構建頁面流程 ? 初學者安裝 vue 用什麼好大家都知道，學 Vue 最好還是去官網學，官網寫得炒雞詳細，如果你能把官網上的知識點都看完看懂，把上面的例子都敲一遍，你怎...

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

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

? 初學者安裝 vue 用什麼好

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

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

所以我那時候學習用 vue-cli 都是在 ofollow,noindex" target="_blank">菜鳥教程上學的，因為教程裡面有對腳手架構建後的目錄結構有做解說，所以對一些沒用過 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
 DONECompiled 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 格式