.net工程師學習vue的心路歷程(三)
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管理器中,這樣以後子啊管理這個項目的時候會更加的方便和清晰。
導入之後:
點擊插件:
這些已有的插件就是我們通過命令行去配置的時候根據需要安裝的插件。