VUE CLI3的使用


1、vue-cli3和2版本的區別

①、vue-cli3是基於 webpack4打造,vue-cli2還是webpack3

②、vue-cli3的設計原則是“0配置”,移除配置文件根目錄下的,build和config目錄

③、vue-cli3提供了 vue ui 命令,提供了可視化的配置,更加人性化

④、移除了static文件夾,新增了public文件夾,並且 index.html移動到public中


2、使用vue-cli3創建項目

1)進入項目需要存放的路徑,vue create 項目名稱

1610026543(1)

2)暫時選擇第三個,手動添加特性

clipboard

點擊enter,進入選擇特性的界面,空格鍵是選擇和取消選擇

clipboard

現在我們只選擇第一個,點擊enter

3)你想將你的配置文件放在哪個位置 - 選擇第一個

clipboard

4)是否保存本次的配置以便於未來的項目使用

clipboard

我們選擇no

如果選擇yes,那么改配置將會保存在 c盤用戶文件夾下的 vue.rc文件中

clipboard

5)現在項目就創建完畢了

npm run serve : 啟動項目

clipboard

啟動成功:運行在8080端口

clipboard


3、vue-cli3創建項目的目錄結構

clipboard

node_modules: 依賴的包 public: 相當於vue-cli2中的static文件夾,存在靜態文件之類的 src : 開發時,寫代碼的文件夾 .browserslistrc:存放瀏覽器的相關配置 .gitignore:版本控制時,需要忽略的一些文件 bable.config.js: bable(復雜化js) 的相關配置


4、vue-cli3 配置文件的查看和修改

vue-cli3中修改配置的幾種方式

1)、使用vue-ui

進入cmd dos模式,輸入 vue-ui

clipboard

選擇...

clipboard

選擇導入的項目,將剛才創建的項目導入

clipboard

【注意】vue-cli3創建的項目,配置隱藏在 node_modules ->@vue ->cli-service下

(但是這里面的文件不能修改)

clipboard

2)在當前項目的根目錄下,新建一個 vue.config.js,名稱是固定的,

當前文件下的配置,會和默認配置合並

clipboard


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM