vue-cli腳手架(3.0以上版本,包括4.0+)快速搭建vue項目,詳細教程,每一步說明。

vue-cli3版本與4版本區別並不大:

主要是兩點:
1、@vue/cli-plugin-pwa、@vue/cli-service等包的增強
2、原來在根目錄下的vuex.js、route.js被分別放到了對應的文件夾下

這並不影響vue-cli腳手架的配置方式

vue創建項目步驟（npm安裝→初始化項目)

第一步npm安裝

首先：先從nodejs.org中下載nodejs

雙擊安裝，在安裝界面一直Next

直到安裝完成

然後打開控制命令行程序（CMD）,檢查是否正常

輸入node -v
	npm -v

如果輸出版本號則說明成功了,如下圖

第二步項目初始化

1.安裝vue-cli

npm install vue-cli -g      //全局安裝 vue-cli

其實對於安裝vue-cli，使用npm命令和cnpm命令都是可以的，個人覺得使用npm安裝的比較慢，而且很可能會因爲網絡問題而出錯，所以還是覺得使用cnpm穩一點。
cnpm鏡像安裝如下

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

查看vue-cli是否成功，不能檢查vue-cli,需要檢查vue,如下圖

2. 使用命令開始初始化並創建自己的項目
.在新文件夾下創建項目

vue create my-project

指向的vuecli3是因爲上一次記錄過的cli3配置，第一次執行create是沒有的
按鍵盤上下鍵可以選擇默認（default）還是手動（Manually），如果選擇default，一路回車執行下去就行了
繼續手動一下

3.選擇配置，看個人項目需求
注意，空格鍵是選中與取消，A鍵是全選
TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預處理器。
Linter / Formatter 支持代碼風格檢查和格式化。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。