Vue前端框架學習（一）：vue的安裝及vue-cli的使用
node.js的安裝
node.js是用來開發服務端的一門語言，我們學習vue前端框架並不需要學習node.js，但是我們需要安裝node.js，使用node.js的npm包管理器來完成vue的環境搭建。
前往Node.js中文網下載並安裝node.js，安裝程序會自動把node添加到環境變量，在安裝完成後重啓即可生效。
重啓後在終端中輸入以下命令查看node.js是否安裝成功：
node -v
然後輸入以下命令查看npm是否安裝成功：
npm -v
若能查看版本號即安裝成功。
cnpm的安裝
npm是node.js的包管理器，用於node插件管理，但npm安裝插件時從國外服務器下載，速度較慢，我們需要使用國內淘寶鏡像cnpm代替國外服務器。
通過全局安裝cnpm
npm install -g cnpm
查看cnpm是否安裝成功
cnpm -v
若在power shell中出現如下錯誤：
解決辦法有兩個1：
- 以管理員身份運行終端
- 在終端中執行命令
set-ExecutionPolicy RemoteSigned
然後再查看cnpm是否安裝成功。
vue-cli的安裝
若要安裝vue-cli2，則在終端中輸入以下命令：
cnpm install -g vue-cli
若要安裝vue-cli3，則先卸載vue-cli2，在安裝vue-cli3：
npm uninstall vue-cli -g
cnpm install -g @vue/cli
然後使用以下命令查看是否安裝成功：
vue -V
vue-cli有vue-cli2和vue-cli3兩種版本，但vue-cli3有更多新特性，所以推薦安裝vue-cli3。
創建vue-cli3項目
以圖形界面方式創建
vue-cli3增加了以圖形界面來管理項目的方式，用一下命令打開圖形界面：
vue ui
在瀏覽器中訪問http://localhost:8000即可得以下畫面：
則可以通過操作圖形界面創建、導入項目並對項目進行管理。
以命令行方式創建
因爲使用圖形界面管理項目的速度比較慢，我們一般直接使用命令行的方式直接管理項目。
使用以下命令創建vue-cli項目
vue create projectName
創建過程中需要我們選定一些選項（空格鍵選擇，回車鍵確認）：
其中一些選項的含義爲：
- Please pick a preset?：這裏提供了默認和手動兩種選擇，我們選擇手動方式。
- TypeScript：這是javascript的一個超集，爲javascript添加更多特性。javascript暫時能滿足我們需求，我們可以不使用typescript。
- Progressive Web App (PWA) Support：移動端網頁應用的支持，如果我們不考慮移動端可不選擇。
- Router：實現頁面跳轉的官方路由，必選。
- Vuex：集中式存儲管理應用的所有組件的狀態，它是一個狀態管理模式。
- Linter / Formatter：使用ESLint來規範代碼。
- Unit Testing：單元測試，測試內容主要是組件內每一個函數的返回結果是不是和期望值一樣。
- E2E Testing：端到端測試，從用戶角度上看，程序相當黑盒子，測試一個應用從頭到尾的流程是否和設計時候所想的一樣
接下來會要我們選擇history模式還是hash模式：
- hash模式：地址欄中會出現
#號，在將url作爲參數傳遞時不能滿足需求 - history模式：地址欄中不會出現
#號，在將url作爲參數傳遞時可以滿足需求，但需要後臺配合，處理404問題。
現在一般都選擇history模式。
接下來還要我們選擇ESLint標準，我選擇了Prettier（譯爲更美麗的），之後在vscode中，可以直接鼠標右鍵>源代碼操作>“Fix all ESLint auto-fixable problems”使代碼規範，如下圖：
最終我的選擇如下所示：
項目安裝完成後，如下圖：
按照提示運行vue項目，並在瀏覽器中訪問http://localhost:8080，則得到下圖中的應用：
