緣起

 哈嘍大家好，兜兜轉轉終於來到了Vue實戰環節，前邊的 6 篇關於Vue基礎文章我剛剛簡單看了看，感覺寫的還是不行呀，不是很系統，所以大家可能看上去比較累，還是得抽時間去潤潤色，修改修改語句和樣式，至少也得對得住粉絲哈，應該給部落格園官方提個小建議，要是能允許好友或者其他人修改文章的功能就好了，比如百科和Wiki 那種就挺好哈哈，今天呢，終於到了安裝環境的一章了，網上的栗子和文件也是很多，本來打算跳過這一章節，但是想想，本系列還是需要這一塊來完善的，這才是整體教程嘛，好啦，廢話不多說，準備好電腦安裝吧！

今天的主要工作就是配置開發環境，不會涉及到程式碼，會平面化的鋪開來說，相對來說比較簡單，只是做一個記錄使用，主要呢由以下幾個方面：

A：安裝 IDE —— Webstorm / VSCode / Atom

B：安裝 nodejs 環境

C：安裝 NPM / CNPM

D：安裝 Git

E：安裝 webpack

F：安裝 vue-cli 腳手架

G：建立 blogvue 工程

H：對整體專案檔案簡要說明

I ：Hello World

 好啦，開始今天的表演~~~

零、今天要完成左下角紅色的部分

A、Vue 常見的IDE —— 我是開發工具，幹活的都是我

一個好用的工具可以為開始節省太多的時間，增加效率，從而達到事半功倍的作用，作為一個.net 攻城獅，我幾乎每天都泡在 visual studio 裡，這個號稱是宇宙級編輯器，當然現在有很多的大神都說開發人員用一個 node++就行，嗯~~~說實話不敢苟同，就比如說今天還著急的寫了幾個頁面，要不是智慧提示，真的會慢很多。今天呢，要說的Vue的開發工具，這裡就簡單說下三種常見的開發工具，大家都可以試試，根據個人愛好（我詢問了幾個vue開發的朋友，普遍用的是sublime，然後現在好像VSCode 和 Webstrorm的比較多，剩下的就是Atom，本系列用的是WebStorm）。

1、VsCode

推薦優點：1、作為微軟大大的產品，咳咳，還是比較給力，我在微軟工作的時候，看到好多人在為了visual studio開發，甚至一個小元件都精益求精，點贊；

2、首次開始初始化特別快，號稱是最快的，如果電腦比較低配，推薦使用；

3、微軟這兩年在開源道路山越來越給力，所以VsCode當然也是開源的，而且顏值也是可以，至少比Webstorm漂亮一丟丟；

4、尤雨溪大大一年前曾經也是很推薦，不知道現在有沒有變化好好；

5、各種外掛隨心安裝，使用量很多，外掛很豐富；

6、支援斷點除錯debug，也是很嗨；

2、Webstorm

推薦優點

2、可以格式化程式碼，也可以自定義，作為強迫症的我來說，必須要程式碼整齊才是好的程式碼哈哈；

3、智慧提示，聯想查詢，可以像VS那樣，Ctrl+滑鼠點選，可以跳轉到定義；

4、程式碼檢查和修復，可以提示錯誤的所在地點，快速解決；

5、最新版本已經繼承Vode外掛，可以介面話啟服務，編譯，打包等等，再也不用寫命令行了；

6、nodejs 最好的開發工具，沒有之一。只要你會用 chrome 除錯瀏覽器器端的 js，那麼你就會用 webstorm 除錯 nodejs。

7、簡單易操作的版本控制，只要你簡單的配置下git或svn就可以使用快捷鍵快速的進行版本控制

8、實時儲存，不用頻繁的按ctrl+s了

Diss缺點：從上邊的功能也可以看出來，VsCode注重開源，快速和社群，這些Webstorm都木有

1、啟動緩慢，記憶體佔據大（300M+），如果再配上websocket，低配置的筆記本就開始唱歌了[哭笑]；

2、是收費滴，真挺貴，只有一個月的免費使用，不過上有政策下有對策，各種序列號，破解等從來沒停過；

3、樣式長的不是很好，雖然有很多主題，屬於注重功能型選手。

3、Atom

推薦優點：1、啥都不說，就衝著這個顏值，就得加分哈哈，還有各種主題；

2、Atom是最大的開源網站github出的，基本功能和顏值都線上的，外掛的質量還是很高的；

3、強大的社群做後盾，為程式設計師開發提供福利，特別是前端程式設計師；

4、當然還有很大的優點，就是開源免費，想用啥都可以；

缺點：1、還是稍微會卡頓的，不過官方正在慢慢優化，相信github也會慢慢加大投入；

總結：嗯。。。不太好說哈，大家可以思考思考，不過可能綜合考慮來說，VsCode可能價效比高，Webstorm功能深，Atom開源顏值美。

B、安裝Nodejs環境 —— 我是執行環境，沒我不行

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。 
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 
Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

 然後就是普通安裝，一步一步 next 即可

安裝成功以後，開啟我們的安裝路徑，我們可以看到，除了node，資料夾裡還有npm，一起被安裝了

下面咱們會說到 npm，這裡咱們先看node是否安裝成功，開啟 CMD 命令視窗，輸入  node -v 

這個時候，能看到node 的版本號，證明我們已經安裝成功了，而且是全域性的。

C、安裝 npm / cnpm —— 我是包管理器，想要的都來拿

首先呢，咱不能直接上來就安裝是吧，得明白其中的含義，為啥要安裝，

 NPM 名字的由來：Node Package(包) Manager(管理器)，從名字看來它是通過 node 的包管理器，嗯大概瞭解了，那具體來說呢，好像還是不清晰，這個時候咱們說個栗子1，

咱們平時開發c#的時候，需要安裝包，咋安裝的呢，就是通過nuget包管理來安裝，沒錯，npm也是起到了這個作用，只不過是 node 需要用的前端包。如果還是不太清晰，咱們說個前端的栗子2，

平時咱們開始jQuery的時候，需要引用jQuery.js 檔案是吧，這一倆個還好，要是多了可咋整，一個個手動新增不方便呀，欸！這個時候就有人想到了辦法，用 JavaScript （執行在 Node.js 上）寫的 npm，來控制已經提交到 遠端倉庫裡的包，這些包都是原作者一個個釋出上去的，起了一個名，如果咱們使用的時候，只需要再 packbag.json 中，寫上這個名字，嗯！就成功的從遠端 down 下來了，是不是很方便，是不是感覺前端慢慢工程化了！

說了這麼多，那到底如何安裝呢，不用慌！上邊咱們也說了，npm 是執行在node.js 上的，所以咱們剛剛安裝 node.js 的時候已經安裝好啦，不信來試試，

在cmd 命令視窗中，輸入 npm -v ，就看到了自己安裝的版本了。

然後就開始用著很開心，但是類，後來發現這個遠端倉庫是在國外的，每次都需要FQ，有時候一二百兆的檔案，需要等好久，更厲害的還卡到了一半，就掛掉了，哎，真是桑心，欸！國外有大神，國內也有老闆，沒錯，就是一直專注於開發的阿里攻城獅們，自己根據 npm ，搭建了一個國內的映象，基本來說內容都差不多，雖然號稱一直在同步，不過有時候命令還是有些問題，不過基本的都沒啥問題，如果你不能FQ，如果電腦很卡，沒問題！放心的時候吧，就是 cnpm！那如何安裝呢？

我們剛剛已經成功的安裝了npm了，這時候我們執行下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完成即可。以後呢，任何 npm 的命令，都可以使用 cnpm 來寫，比如下邊，就是這麼簡單！ 

npm  run dev//正規版
cnpm run dev //映象版

D、安裝 Git —— 我來簡化cmd操作的，可以不用我

這裡要說下為什麼安裝 git，因為在以後的開發中，會涉及到各種啟服務呀，釋出呀等等，而且都需要進入不同專案的不同資料夾操作，常用的呢是以下三個操作：

1、通過cmd 命令列，進入不同的資料夾，比如：cd D:\Program Files\nodejs ，然後再進入不同的資料夾，萬一哪次沒看好生成錯了，就麻煩，所以我們需要工具。

2、通過 power shell 來執行，不知道這個工具的呢，可以百度下，目前win10自帶都有，使用起來也很簡單，在當前資料夾下，先按下 shift 鍵，然後點選滑鼠右鍵，就彈出來了，

然後執行命令也是可以滴，是不是很方便，當然還可以使用下一種。

3、通過 git 的方法，https://git-scm.com/downloads，然後普通安裝成功後，就能看到上圖中的 Git Bash Here 了，就是直接進入當前資料夾地址，然後就可以隨心的操作了。

總結：通過一定的工具來輔助開發還是很有必要的，安全又可靠。

E、安裝webpack —— 我是打包東西的

 還是老規矩，咱們呢，先說說什麼是WebPack，這裡要說webpack ，那首先就得說說 SPA

1、什麼是SPA

這個名字起的，總能讓大家想起來其他的哈哈，言歸正傳，現在的web網站正在慢慢前端化，在vue開篇的時候我也說過了，關於我的開發歷程，來簡單說了下web的發展過程《十四 ║ VUE 計劃書 & 我的前後端開發簡史》，總結來說，越來越多的JS，由整頁的重新整理，到區域性重新整理，到現在的SPA（單頁面應用程式）—— 就是整個專案是一個頁面，通過錨點 路由，將全部的元件結合起來，看起來像是多個頁面。所以大家想一下，現在整個web應用程式都融合到了一個頁面裡，一個體積龐大的程式碼庫就需要好好的控制和組織，不能出現混亂的局面，這個時候為了解決這個問題，就出現了——模組化程式設計的思想。

2、傳統前端開發的問題

這個時候如果還是不太清楚，那我們舉個栗子：

大家在開發的時候一定會遇到過這個問題，我的專案是用Bootstrap框架開發的，但是呢，突然領導看上了EasyUI其中的一個元件或者是小外掛，這個時候，我們就會直接把EasyUI的樣式給引入進來，

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

//引入了EeayUI樣式
<link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.5/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.5/themes/icon.css"/>

這個時候，本來應該很開始的看結果了，發現好多地方都衝突了，額。。尷尬呀，當然正規專案是不能這麼開發的，都是自己的前端工程師寫的，這裡只是舉一個反面教材，大概就是這個意思，當然還有JS檔案的引用，比如這樣

<script src="module111.js"></script>
<script src="module222.js"></script>
<script src="libraryABC.js"></script>
<script src="module333.js"></script>

模組介面匯出到全域性物件,即window物件。模組的介面可以訪問全域性物件的依賴關係，從上邊的問題中可以看出來以下問題

全域性衝突 
對載入的順序嚴重依賴
開發人員必須人工解決模組/庫的依賴關係 
大型專案，script.js可以很長,難以管理

3、CommonJs: 同步載入 就出現了

這種風格用同步require 的方法去載入一個依賴並用暴露一個介面。 一個模組可以通過給export物件新增屬性或給module.exports設定值 來指定匯出。

require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

伺服器端node.js用的就是這種標準。 1. 伺服器端模組可以重用 2. 已經有許多模組用這種風格(npm)。生態圈良好 3. 非常簡單和容易使用。

4、什麼是webpack，為什麼要使用它

webpack是一個模組打包器。WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。webpack把模組(s)連同它的依賴一起打包生成包含這些模組的靜態資源。現有的模組打包器不適合大專案（大單頁面應用）程式。程式碼分割和靜態資源無縫模組化的迫切需求，催生了一個新的模組打包器。 我試圖擴充套件現有的模組打包器，但是它沒能實現所有的目標。 

1. 把依賴樹切分成塊，實現按需載入。

2. 保持低初始載入時間

3. 每個靜態資源都能是一個模組

4. 具備把第三方庫整合為模組的能力

5. 具備打包器每個部分幾乎都能自己定製的特點。

6. 適合大型專案。

安裝：直接執行 npm 命令

npm install webpack -g

這個時候，我們的 webpack 就已經安裝完成啦，以後可以使用了。

F：安裝 vue-cli 腳手架 —— 我是用來建立專案模板的

vue-cli 是vue.js的腳手架，用於自動生成vue.js+webpack的專案模板的，腳手架大家肯定知道，就是一個架子，用來搭建專案的整體基本骨架，有點兒什麼意思呢，就比如咱們開發 .net 的時候，咱們其實可以自己一步一步的建 mvc ，但是呢，VS給我們封裝了 MVC框架，我們直接就生成了整體框架，包括基礎包和一些必要資料夾，vue-cli 也是這個作用。

全域性安裝：直接輸入 npm 命令

npm install --global vue-cli

安裝完成後，我們輸入 vue -V（這裡是大V），看到版本號，就證明安裝成功了，現在已經是 3.0 的腳手架了，生成的資料夾和 2.0 的不一樣，一會兒咱們都會說到。

G：建立 blogvue 工程

1、先說說 2.0 的建立工程的過程

1、進入指定資料夾後，執行 

vue init webpack blogvue

2、然後就是一系列選擇的過程

然後就是一直等待就行了，看到完成了。然後進入該專案資料夾，執行 npm run dev，就可以啟動了

就這樣啟動了。

2、然後呢咱們再說下 3.0 的建立工程過程

首先執行下命令  npm i -g @vue/cli 升級到3.0（ 注意管理員許可權 ）

安裝好後，開始建立我們的專案  vue create project-name

這裡有兩個方式：預設方式和手動方式

預設方式就是安裝 babel 和 eslint ，一致 Enter 鍵往下走就是了，因為不需要那麼多，所以我就選擇手動了，這裡說下，好多人第一次不知道如何進行選擇——使用滑鼠上下鍵來操作，然後 Enter 選中，然後就會出現外掛列表，也是用上下鍵，然後用 空格鍵 來選中，下邊有動圖。

選擇要安裝的配置（注意： linter/formatter 程式碼規範儘量不要選）

這裡說下這幾個的意思：

babel：一個javascript轉譯器，將最新版的js語法（es6、es7）轉換為現階段瀏覽器可以相容的js程式碼

typescript：作用有些類似於babel，擁有型別檢查能力和麵向物件新特徵。

PWA：漸進式WEB應用

Router：路由，設定url，使不同的url顯示不同的頁面

Vuex：作用類似於全域性物件，但是並不完全相同。

CSS Pre-processors：css前處理器

Linter / Formatter：程式碼規範標準  // 注意：這個到時候會出現很多的 錯誤警告提示，有的不影響執行的也會有，所以儘量不要選

Unit Testing：單元測試

E2E Testing：e2e測試

接下來，選擇css預處理，這裡我選擇stylus

 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  SCSS/SASS
  LESS
> Stylus

CSS前處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為CSS增加了一些程式設計的特性，將CSS作為目標生成檔案，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS前處理器用一種專門的程式語言，進行Web頁面樣式設計，然後再編譯成正常的CSS檔案，以供專案使用。CSS前處理器為CSS增加一些程式設計的特性，無需考慮瀏覽器的相容性問題，例如你可以在CSS中使用變數、簡單的邏輯程式、函式等等在程式語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於程式碼的維護等諸多好處。

這裡說下 stylus ：來自於Node.js社群，主要用來給Node專案進行CSS預處理支援，不過在使用人群上不如Sass和LESS。

然後選擇格式化配置

選擇何時檢查程式碼規範 —— 儲存的時候

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

選擇配置的存放地址

 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files //獨立檔案存放
  In package.json// package.json 檔案

然後是否將上述配置儲存（儲存後，下一次將能直接一鍵配置）

 Save this as a preset for future projects? (y/N)

下次安裝的時候就是這樣的

接下來就是安裝了，等待中...

H：對整體專案檔案簡要說明(整理中)

1、2.0的整體專案構造是這樣的

├── README.md                       // 專案說明文件
├── node_modules                    // 專案依賴包資料夾
├── build                           // 編譯配置檔案，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 專案基本設定資料夾
│   ├── dev.env.js                  // 開發配置檔案
│   ├── index.js                    // 配置主檔案
│   └── prod.env.js                 // 編譯配置檔案
├── index.html                      // 專案入口檔案
├── package-lock.json               // npm5 新增檔案，優化效能
├── package.json                    // 專案依賴包配置檔案
├── src                             // 我們的專案的原始碼編寫檔案
│   ├── App.vue                    // APP入口檔案
│   ├── assets                      // 初始專案資源目錄，回頭刪掉
│   │   └── logo.png
│   ├── components                  // 元件目錄
│   │   └── Hello.vue               // 測試元件，回頭刪除
│   ├── main.js                     // 主配置檔案
│   └── router                      // 路由配置資料夾
│       └── index.js                // 路由配置檔案
└── static                          // 資源放置目錄
└── test                             // 我們的專案的單元測試檔案

2、3.0的整體專案做了很大的調整，沒有了 build 和 config

├── public                      　　  　    // 專案公共資料夾
│   └── favicon.ico             　　 　     // 專案配置檔案
│   └── index.html              　　  　    // 專案入口檔案
├── src                        　　　　　    // 我們的專案的原始碼編寫檔案
│   ├── assets                  　　         // 基礎樣式存放目錄
│   │   └── logo.png        　　　　　　　    // 基礎圖片檔案
│   ├── components                          // 元件存放目錄
│   │   └── HelloWorld.vue       　　　　    // helloworld元件
│   ├── views                               // view存放目錄
│   │   ├── About.vue       　　　　　　　    //about 頁面
│   │   └── Home.vue       　　　              //Home 頁面
│   └── App.vue            　　　　　　　　   // App入口檔案
│   └── main.js             　　　　　　　  　 // 主配置檔案
│   └── router.js             　　　　　　 　　 // 路由配置檔案
│   └── store.js             　　　　　　　 　 // Vuex store配置檔案
├── tests                      　　  　      // 測試資料夾
│   ├── unit                  　　            // 單元測試
│   │   ├── .eslintrc       　　　　　　 　    // 基礎圖片檔案
│   │   └── HelloWorld.spec.js        　　　
└── babel.config.js                           // babel 配置檔案
└── package.json                             // 專案依賴包配置檔案 
└── package-lock.json                        // npm5 新增檔案，優化效能
└── postcss.config.js                        //  
└── README.md                                // 說明文件 

I、結語

好啦，今天的安裝就到這裡了，當然還有一些小技巧我還沒有說，終於出現傳說中的Hello World了，下次咱們就開始正式搭建專案啦，再見咯~~~