利用 Vue cli 腳手架工具快速創(chuàng)建 工程化的 Vue 項目
前置要求
-
首先你的電腦上需要安裝 node 和 npm
node 可以在 node.js 官網(wǎng)拌阴，按照你的系統(tǒng)版本郎哭，按需下載赡勘，非常方便兵罢，所以這里就不再多啰嗦啦！
npm 是全球都在用的前端資源倉庫！（這是我對它的稱呼，哈哈Ｈ榔浴）
npm 對于前端開發(fā)者來說是取之不盡用之不竭的寶庫，你會從其他大神所開發(fā)的開源組件中學到很多知識和技巧琅轧！
不僅僅 vue 的全家桶套裝都有在 npm 上伍绳，更是因為學會使用 npm 對一個前端開發(fā)者來說是必備技能，所以趕快 Get 吧乍桂！
npm install -g vue
npm install -g @vue/cli
-
-g 選項是什么意思墨叛？
-g 指的是 global ，意思是全局安裝模蜡，即不只在你的開發(fā)項目文件夾那一個小小的封閉環(huán)境里安裝，是在你電腦的整個 npm 環(huán)境中安裝哦扁凛！
-
由于我們要使用最新的 vue cli 腳手架工具忍疾，而官方的提示已經(jīng)不推薦
npm install -g vue-cli這個庫的安裝方式了。所以我們選擇官方提示的 @vue/cli 吧谨朝！
-
WebStorm 與 Visual Studio 選誰呢卤妒？
眾所周知甥绿，WebStorm 是一個非常棒的 IDE 開發(fā)工具，它的優(yōu)點就在于它很全面则披，什么框架的東西它都會首先去適配去支持... 當然共缕，Vue作者尤雨溪也推薦使用 Visual Studio Code...
所以其實二者都是不錯的選擇，看你更喜歡豐富強壯的IDE 還是 輕便快捷的 文本編輯器啦士复！
然而在 Vue CLi 這件事情上... 它做的也太絕了吧图谷！
它居然自己把 Vue CLi 工具 集成到了軟件界面里！不過對使用它的人來說這是非常方便的... 但作為博客展示就不太好看了...
所以阱洪，我們還是選擇了用 Visual Studio Code + PowerShell ( Linux 平臺下用終端 shell 也是一樣的 ) 展示如何在命令行界面下用 Vue CLi 腳手架工具初始化一個 工程化的 Vue 項目便贵。
Vue Cli 配置各個選項怎么填？
-
Step 1：通過 Visual Studio Code 打開一個文件夾冗荸，并打開 PowerShell 終端
如果你已經(jīng)完成了之前前置要求的配置承璃，那么此時你應該可以使用 vue 命令選項了。
在終端中輸入：
vue create your_project_name" your_project_name " 就是你想設置的項目文件夾名蚌本，這個文件夾將會由 Vue CLi 工具來創(chuàng)建
-
Step 2：第一項盔粹，不選取默認設置，我們一步步自己來配置程癌；
將箭頭移動到 Manually select features 然后回車舷嗡；
-
Step 3：第二項，來選一下我們將為我們的項目引入那些 工具席楚、組件包：
用 空格 來選擇需要的組件包咬崔，Babel 和 Linter / Formatter 是默認選好的，那我們也就不動它們了烦秩。
我們選擇一下三項：
- Router： Vue 全家桶中的 路由工具垮斯，是學習 Vue 時一定要學的一環(huán)。
- Vuex： Vue 全家桶中的 狀態(tài)管理工具只祠，也是必學的工具之一兜蠕。
- CSS Pre-processors： css 的預處理工具；
-
Step 4：接下來抛寝，我們將繼續(xù)對我們選擇的這些工具組件進行一下配置選項的選擇：
那么先是關于 Router 的：
yes_for_routerHistory.png
? 該項詢問：是否使用歷史模式熊杨？此處我們選擇：Yes 就好啦 ~
- Step 5：然后是選擇采用哪種 CSS 預處理裝置；
? 我們在這里選擇 Sass / SCSS 盗舰；
- Step 6：之后我們選擇 ESLint 的模式：
對于 ESLint 模式晶府，我接觸的教程都比較推薦：Airbnb 或者是 Standard 模式。
-
Step 7：最后我們選擇
是 在保存時 進行語法檢查
是 在 commit 提交時 進行語法檢查和修正
choose_ESLintWhenSave.png
此處我們選擇 **保存時 進行語法檢查**
-
Step 8：工具的選項配置完成了钻趋，vue CLi 會詢問：是否保存你此次的配置川陆？
請一定選擇 No！ 因為保存意味著今后所有的 vue cli 都將以此來配置項目了蛮位！
-
之后就是等待了... ...
如果網(wǎng)絡情況不好较沪，沒有架設梯子鳞绕，下載太慢甚至卡掉了的話，不妨切換到 淘寶 npm 國內(nèi)鏡像源 會快一些尸曼。
- 因為我們是在用 VS Code 打開的這個文件夾目錄下進行的創(chuàng)建们何，所以此時左側(cè)的文件夾視圖中會出現(xiàn)你剛才輸入的項目文件夾名，打開之后控轿，你將發(fā)現(xiàn)是以下這樣的目錄結(jié)構(gòu)：
-
目錄中有很多都是 項目開發(fā)完成后 打包時的一些打包工具的配置文件冤竹，暫時我們不做介紹；
但是 packge.json 是必須要了解的解幽，它存放了本項目最基本也是最重要的一些包依賴信息：我們打開看一看：
此處的 version 是 npm 為你的項目初始化了一個版本號贴见，一般都是從這樣一個 0.1.0 開始的；
dependencies：是本項目 必須 依賴的組件躲株、工具包片部。 無論開發(fā)環(huán)境還是生產(chǎn)環(huán)境。
-
同樣是 dependencies霜定，但下面這一個 加了一個 dev 在前面：
這是在開發(fā)時我們需要用到的組件档悠、工具。比如一些打包程序望浩，在生產(chǎn)環(huán)境當然是不用的
-
然后就是 最重要的 三個命令 啦Ｏ剿：
- serve ：進行開發(fā)環(huán)境的運行，并且 vue 是支持 熱加載 的磨德，你的代碼內(nèi)容一更改缘回，頁面內(nèi)容就會相應地立刻做出反應，發(fā)生改變典挑。
- bulid ：進行打包酥宴，然后會在 根目錄 生成一個 dist 文件夾，里面是 index.html 和 打包好的 css您觉、js 文件拙寡，你的 vue 項目就可以很容易地發(fā)布到服務器了 ~ 據(jù)此我們之后還會有比較詳細的部署發(fā)布教程 ...
- lint ：進行項目代碼內(nèi)容的語法檢查 。
那么現(xiàn)在我們就把項目 跑起來 試一下吧琳水！
等待 出現(xiàn) 編譯成功 ( Compiled successfully ... ) 和 DONE 的字樣時肆糕，就可以按照提示的地址，在瀏覽器中看到初始化好的 Vue 示例項目了在孝！
