P12.3-VueCLI3創建項目
P12.3-VueCLI3創建項目
文章目錄
P12.3-VueCLI3創建項目
1.概述
2.VueCLI3創建項目
2.1.VueCLI3創建項目命令
2.2.選擇配置方式
2.3.選擇項目需要的配置
2.4.選擇配置文件存放路徑
2.5.是否保存為模板
2.6.自定義保存模板名字
2.7.等待VueCLI3創建項目完成
2.8.查看保存的模板
2.9.刪除保存的模板
3.VueCLI3項目目錄介紹
3.0.VueCLI3項目完整目錄
3.1.CLI3和CLI2 package.json區別
3.2.CLI3和CLI2 main.js區別
3.3.運行VueCLI3和VueCLI2項目命令區別
1.概述
vue-cli 3 與 2 版本區別
vue-cli 3 是基于 webpack 4 打造，vue-cli 2 還是 webapck 3
vue-cli 3 的設計原則是“0配置”，移除的配置文件根目錄下的，build和config等目錄
vue-cli 3 提供了 vue ui 命令，提供了可視化配置，更加人性化
移除了static文件夾，新增了public文件夾，并且index.html移動到public中
2.VueCLI3創建項目
2.1.VueCLI3創建項目命令
# 創建項目命令 vue create mycli3 #命令說明 vue create：創建項目命令 mycli3：項目名稱
1
2
3
4
5
6
2.2.選擇配置方式
我們選擇手動配置方式
2.3.選擇項目需要的配置
通過上下鍵切換配置選項，空格鍵選中和取消該配置選項。我們只選擇一個babel就可以了，后面的暫時用不到先不安裝。
2.4.選擇配置文件存放路徑
In dedicated config files：配置文件單獨存放
In psckage.json：配置文件存放到package.json文件中
我們選擇第一個選項單獨存放到配置文件
2.5.是否保存為模板
詢問我們是否將上面配置保存為模板，如果保存為模板，下次在創建項目時候直接選擇我們保存的模板，就不需要在手動配置。
2.6.自定義保存模板名字
2.7.等待VueCLI3創建項目完成
2.8.查看保存的模板
執行創建項目命令，就會顯示我們剛才創建的cli3模板，選擇該模板可以直接創建項目，不需要再配置項目需要的組件。
2.9.刪除保存的模板
如果我們保存的模板很多，或者有些模板已經不需要了。我們如何刪除這些模板那？
的打開電腦–C盤–用戶–登錄電腦的賬戶–打開.vuerc文件
修改.vuerc文件刪除不需要的模板，注意cli3模板是最后一個模板如果刪除的模板是文件中最后一個，那么也要將模板上面挨著的逗號刪除。這個是json格式要求，最后一個對象不需要逗號。
再次安裝項目保存的模板已刪除
3.VueCLI3項目目錄介紹
3.0.VueCLI3項目完整目錄
3.1.CLI3和CLI2 package.json區別
在CLI3中package.json界面要比CLI2中package.json簡潔很多，在CLI3中對package.json包做了優化，使用@vue/cli-service來管理包。所以在package.json中看上去簡潔了很多。
3.2.CLI3和CLI2 main.js區別
3.3.運行VueCLI3和VueCLI2項目命令區別
VueCLI3項目package.json運行項目命令做了調整，調用vue-cli-service間接調用package構建項目。
運行項目
#進入項目根目錄 cd .\mycli3\ #運行項目 npm run serve
1
2
3
4
5
JavaScript Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。