一、前言

在上一篇中，我們通過初步的認識，簡單了解 Vue 生命周期的八個階段，以及可以應用在之后的開發中，針對不同的階段的鉤子采取不同的操作，更好的實作我們的業務代碼，處理更加復雜的業務邏輯，

而在這一篇中，我們將通過配置vue的開發環境以及搭建專案，進一步的學習vue在開發中的使用方式，

對于開發vue專案之前，我們需要進行vue環境配置，大致的將需要用到的工具進行歸類總結如下：（可能還有其他的工具，或者配置方式，這里僅是個人開發中常用的工具）

二、運行環境

1.簡單的說 Node.js 就是運行在服務端的 JavaScript，
2.Node.js 是一個基于Chrome JavaScript 運行時建立的一個平臺，
3.Node.js是一個事件驅動I/O服務端JavaScript環境，基于Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好，

Node.js在維基百科中就已經很明確的說明了，它是一個運行環境，并不是其他的什么比如軟體庫，簡而言之，和C#所需要的編譯環境一樣，Node.js就是JavaScript的編譯環境，它存在的目的就是為了讓JavaScript可以和其他的后端語言一樣能夠在瀏覽器上運行，換種說法就是，可以讓前端語言JavaScript在寫完之后交給Node.js進行編譯和解釋，它的存在對于JavaScript有了質的飛躍，對于一個前端來說利用JavaScript就可以編譯后臺代碼是一件多么爽飛天的事情，

安裝：

通過node官網地址,直接點擊下載安裝，

注意：在此之前，可以有朋友會發現，在博文目錄中，很早就有一篇關于node安裝與vue運行的文章，大伙可以參考，進行相應的安裝

通過打開 CMD 命令視窗，輸入 node -v，檢查node是否安裝成功

三、包管理器

由于新版的nodejs已經集成了npm，所以之前npm也一并安裝好了，

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：

1.允許用戶從NPM服務器下載別人撰寫的第三方包到本地使用，
2.允許用戶從NPM服務器下載并安裝別人撰寫的命令列程式到本地使用，
3.允許用戶將自己撰寫的包或命令列程式上傳到NPM服務器供別人使用，

npm簡單的可以這么理解：在以前開發網站的時候，比如你想使用 jQuery，那么你點擊 jQuery 網站上提供的鏈接就可以下載 jQuery，放到自己的網站上使用,當一個網站依賴的代碼越來越多，我們發現這是一件很麻煩的事情：去 jQuery 官網下載 jQuery，去 BootStrap 官網下載 BootStrap，一個個手動的添加極其不方便，于是，有人想出了一個解決方案，用一個工具把這些代碼集中到一起來管理吧！這個工具就是他用 JavaScript （運行在 Node.js 上）寫的 npm，全稱是 Node Package Manager，

如果咱們使用的時候，只需要再 packbag.json 中，寫上這個名字，嗯！就成功的從遠程 down 下來了，省去了一個個下載的環節，是不是很方便了！

四、打包工具

WebPack運行流程：

初始化配置引數 -> 系結事件鉤子回呼 -> 確定Entry逐一遍歷 -> 使用loader編譯檔案 -> 輸出檔案

作用：

1、把依賴樹按需分割、按需加載；
　2、把初始加載時間控制在較低的水平；
　3、每個靜態資源都應該成為一個模塊；
　4、能把第三方庫集成到專案里成為一個模塊；
　5、能定制模塊打包器的每個部分；
　6、能適用于大型專案，

WebPack可以看做是模塊打包機：它做的事情是，分析你的專案結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用，

安裝指令：

npm install webpack -g

五、Vue-CLI腳手架

vue-cli是腳手架工具，其作用就是用配置好的模板迅速搭建起一個專案工程來，省去自己配置webpack組態檔的基本內容，

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

安裝：

npm install -g @vue/cli

六、開始

安裝好腳手架后，在這里用到的腳手架是3.0版本以上的，

1、創建專案

1）創建專案：vue create firstproject

如果沒有配置保存過，則只有以下兩個選項：

1.自動默認模式 ( 直接enter)：非常適合快速創建一個新專案的原型，沒有帶任何輔助功能的 npm包

2.手動模式（按方向鍵 ↓），是我們所需要的面向生產的專案，提供可選功能的 npm 插件包

這里選擇手動方式：使用鍵盤上下鍵來操作，然后 Enter 選中，就會出現插件串列，也是通過上下鍵，然后用空格鍵來選中

在這里說明：

>( ) Babel //轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行，
( ) TypeScript// TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含并擴展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運行，目前較少人再用
( ) Progressive Web App (PWA) Support// 漸進式Web應用程式
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的狀態管理模式）
( ) CSS Pre-processors // CSS 前處理器（如：less、sass）
( ) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測驗（unit tests）
( ) E2E Testing // e2e（end to end）測驗

2）選擇css 預處理

主要為css解決瀏覽器兼容、簡化CSS代碼等問題，

這里選擇stylus

在這里說明：

> SCSS/SASS //Sass安裝需要Ruby環境，是在服務端處理的，SCSS 是 Sass3新語法（完全兼容 CSS3且繼承Sass功能）
LESS //Less最侄訓通過編譯處理輸出css到瀏覽器，Less 既可以在客戶端上運行，也可在服務端運行 (借助 Node.js)
Stylus //Stylus主要用來給Node專案進行CSS預處理支持，Stylus功能上更為強壯，和js聯系更加緊密，可創建健壯的、動態的的CSS，

3）單元測驗：

在這里說明：

> Mocha + Chai //mocha靈活,只提供簡單的測驗結構，如果需要其他功能需要添加其他庫/插件完成，必須在全域環境中安裝
Jest //安裝配置簡單，容易上手，內置Istanbul，可以查看到測驗覆寫率，相較于Mocha:配置簡潔、測驗代碼簡潔、易于和babel集成、內置豐富的expect

4）放置配置