.net工程師學習vue的心路歷程(三)

CR7Ronaldo發表於2021-11-21

vue cli3沒記錯的話是在2019年8月份yyx個人正式宣告發布。

接下來就開始我們的vue cli3的方式建立vue專案。明白一點,vue cli3遵循的一個原則就是 "0配置" 也就是說開發者不需要自己手動去做一些複雜配置。這裡還提供了一個vue cli視覺化工具,通過這一工具可以更加方便的去管理和建立我們的vue專案!

通過 vue  create projectname 命令去建立vue專案,vue cli2是通過 vue init webpack projectname 去建立專案。

根據自定義專案名稱按下回車:

這裡看到有個666-arch的專案(第一次建立的時候是沒有的!),實際上這個專案是根據下面一個配置它會讓你選擇是否記住本次配置的專案手段,然後以後再去建立專案的時候不需要再一一選擇,直接按照你第一次建立的這個專案來配置。而這個配置具體檔案是在一個 .vuerc 的檔案裡面配置的。實際上就相當於配置的一個專案模板。第二次建立的時候選擇這個模板就行了。

路徑的位置要看你們自己的。

如果想要刪除掉這個配置就是再這個檔案裡面去操作。把presets裡面配置相關的刪除掉然後儲存這個檔案就行了。

Manuall select features 這個的意思就是全場手動去配置,這裡我就還是選擇手動配置

相比vue cli2這裡就一次性選擇你需要的配置然後再建立。這裡只選擇Babel去配置

配置完成之後的專案結構(主要看main,js這個入口的變化):

往伺服器做提交時做一些配置,有些檔案時不需要提交的伺服器的時候,就需要改動這個 .gitignore 檔案就行了,比如/dist,這個檔案就會被忽略:

服務啟動命令也是在package.json檔案中時可以檢視的,這一點和vue cli2時一樣的。只不過少了很多內容,目的就是為了"0配置",我們不需要做太多的考慮去研究這個命令執行後還去執行了哪些哪些檔案。。。

我們去執行的時候好是通過 npm run serve 這個和vue cli2還是不願意,vue cli2是通過 npm run dev

接下來就是要去看到一個視覺化工具。通過 vue ui 就可以執行起來,這也是啟動服務的一種方式。實際上視覺化工具在我們通過命令:npm install -g @vue/cli 的時候已經幫我們建立好了。

這裡的重點是匯入的操作,也就是將我們通過命令建立好的vue專案匯入到這裡GUI管理器中,這樣以後子啊管理這個專案的時候會更加的方便和清晰。

匯入之後:

點選外掛:

這些已有的外掛就是我們通過命令列去配置的時候根據需要安裝的外掛。

 

相關文章