緣起
哈嘍大家好，兜兜轉轉終於來到了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
安裝地址：https://code.visualstudio.com/Download
推薦優點：1、作為微軟大大的產品，咳咳，還是比較給力，我在微軟工作的時候，看到好多人在為了visual studio開發，甚至一個小組件都精益求精，點贊；
2、首次開始初始化特別快，號稱是最快的，如果電腦比較低配，推薦使用；
3、微軟這兩年在開源道路山越來越給力，所以VsCode當然也是開源的，而且顏值也是可以，至少比Webstorm漂亮一丟丟；
4、尤雨溪大大一年前曾經也是很推薦，不知道現在有沒有變化好好；
5、各種插件隨心安裝，使用量很多，插件很豐富；
6、支持斷點調試debug，也是很嗨；
2、Webstorm
安裝地址：https://www.jetbrains.com/webstorm/download/#section=windows
推薦優點：1、只能代碼補全，針對不同的瀏覽器，還支持基本流行庫JQuery, YUI, Dojo, Prototype, Mootools and Bindows。
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
安裝地址：https://atom.io/
推薦優點：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，是全球最大的開源庫生態系統。
安裝地址：官網 https://nodejs.org/en/download/
然后就是普通安裝，一步一步 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 ，就看到了自己安裝的版本了。
然后就開始用着很開心，但是類，后來發現這個遠程倉庫是在國外的，每次都需要翻牆，有時候一二百兆的文件，需要等好久，更厲害的還卡到了一半，就掛掉了，哎，真是桑心，欸！國外有大神，國內也有老板，沒錯，就是一直專注於開發的阿里攻城獅們，自己根據 npm ，搭建了一個國內的鏡像，基本來說內容都差不多，雖然號稱一直在同步，不過有時候命令還是有些問題，不過基本的都沒啥問題，如果你不能翻牆，如果電腦很卡，沒問題！放心的時候吧，就是 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 的創建工程過程
截至到目前，vue腳手架已經4.0版本了，但是我的教程是3.0的，可能不太一樣，如果你也想安裝3.0的，可以指定安裝版本
npm install -g vue-cli@版本號
如果就想用最新版本的，直接默認安裝吧
首先執行下命令 npm i -g @vue/cli 升級到3.0（ 注意管理員權限 ）
安裝好后，開始創建我們的項目 vue create project-name
這里有兩個方式：默認方式和手動方式
默認方式就是安裝 babel 和 eslint ，一致 Enter 鍵往下走就是了，因為不需要那么多，所以我就選擇手動了，這里說下，好多人第一次不知道如何進行選擇——使用鍵盤上下鍵來操作，然后 Enter 選中，然后就會出現插件列表，也是用上下鍵，然后用 空格鍵 來選中，下邊有動圖。
選擇要安裝的配置（注意： Linter / Formatter 盡量不要選，會經常報格式不正確警告和報錯，如果無所謂也可以安裝）
特別是在 build 的時候，也會出現報錯，但是只要看到生成 dist 文件夾就行了，不用關注那些 errror 和 warning
下邊是選擇的過程：
這里說下這幾個的意思：
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)
下次安裝的時候就是這樣的
接下來就是安裝了，等待中...
3、通過可視化UI頁面創建
我們可以直接通過命令，vue ui 來調取頁面，基本都是一樣的，沒有啥區別，只是更UI化。
具體的大家可以玩玩，這里就不細說了。
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了，下次咱們就開始正式搭建項目啦，再見咯~~~
