vue-cli

1、vue-cli

是vue提供的腳手架工具；可經過webpack搭建的開發環境；使用ES6語法（提供相應loader對咱們寫的代碼進行轉換成瀏覽器可識別的es5）；打包和壓縮JS爲一個文件；項目文件在環境中編譯而不是瀏覽器；實現頁面自動刷新。

2、vue-cli的做用

能夠幫咱們生成目錄結構。

提供本地開發調試。

代碼部署。

熱加載特性提升編程效率。

單元測試。

3、安裝

到此咱們的安裝就成功了，打開http://localhost:8080就能夠看到welcome界面了。

快捷鍵：進入文件夾，按住shift再右鍵可進入命令行

命令vue -V能夠查看到安裝好的vue版本。

4、目錄結構分析

build：webpack配置相關的文件

config：生產環境和開發環境的一些配置參數

打開index.js就能夠看到開發環境的配置

node_modules：安裝的第三方依賴

src：咱們本身作項目的源碼。

assets放置靜態資源（圖片，css，js）；components放公共組件；main.js是入口文件；App.vue是整個應用的入口組件，即根組件。

 

static：放置第三方資源。.gitcap:當咱們創立了空白文件夾提交git項目是提交不上去的，會忽略空白文件夾，若是想把空的也上傳，就寫上.gitcap。

.babelrc：咱們作項目用的是es6的語法，把es6語法轉成es5。

.editorconfig：編輯器的一些配置

.eslintignore：代碼檢查時忽略的文件

.eslintrc：代碼風格檢查，在這裏能夠自行設置須要檢查的和不想要檢查的格式。在代碼段前面加上這段註釋，就會忽略檢查這段代碼：/* eslint-disable no-new */。

.giteginore: 使用git提交項目的時候忽略的文件和文件夾，如node_modules太大了。

.postcssrc：預先設置的css規則。

index.html：項目的模板。

package.json：整個項目的描述和配置。scripts是一些指令(npm run+key)來執行。

例以下npm run dev就可執行dev那一長串指令：

、

webpack基本配置

webpack相關配置文件在build與config文件夾中。

check-versions.js：檢查node npm版本是否符合指定的版本。

config的index.js：構建和開發時候的一些配置項，好比port端口號。

模塊做用：

chalk：定義輸入終端的樣式

semver：處理版本號的，好比兩個版本號進行對比或者只要一些純淨的版本號。

shelljs：執行一些終端的命令。

path：處理路徑相關的。

opn：啓動應用時自動打開瀏覽器

express：node的一個框架，用來迅速搭建一個node服務。

 

 Tips

看英文文檔要會抓重點。有時候文檔不夠詳細能夠去tag裏找歷史版本。