Vue-cli腳手架2.0和3.0創建項目的區別?


一、生成項目命令

1、安裝3.x版本的Vue腳手架:

npm install -g @vue/cli

創建Vue項目命令:

vue create 項目名稱

或基於ui界面創建Vue項目,命令:vue ui

2、安裝了vue-cli 3.x 后如何使用 vue-cli 2.x 創建項目

需要安裝一個橋接工具才能使用 vue-cli 2.x創建項目

npm install -g @vue/cli-init

創建Vue項目:

vue init webpack 項目名稱

二、目錄的區別

1、vue-cli 3.0的項目擯棄了 config 、 build 、 static 目錄,新增了 public 目錄,將根目錄下的 index.html 放置在 public 目錄下。

新增 webpack 的配置文件 vue.config.js ,可以在該文件中進行webpack的相關配置,例如 loader、開發環境等等。

新增 .browserslistrc 文件,指定了項目的目標瀏覽器的范圍,用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴,可以理解為瀏覽器兼容。

新增 babel.config.js 替代原先的.babelrc,具備和原先.babelrc一樣的作用。

src文件夾中多了 views 文件夾,相比2.0,在 index.js 變為了 router.js

2.0版本相比3.0版本 有build和config文件夾等,src文件夾中有router文件夾,里面有index.js

 

2、用vue-cli3.0版本創建的項目與2.0版本相比較,我們會發現,文件目錄少了很多 eg:build、config,那么如何像vue-cli 2.* 之前關於端口號的配置、打包之后的路徑的配置、圖片的配置等,到哪里配置呢??vue-cli 3.0 可以在項目的根目錄下新建一個 vue.config.js 文件,之前繁瑣的配置都可以在這里直接配置。

官方是這樣說的。vue.config.js 是一個可選的配置文件,如果項目的(和package.json 平級)根目錄中存在這樣一個文件,那么他會被 @vue/cli-service 自動加載,(並覆蓋其內部的配置)

更多的相關配置,可參考官網  https://cli.vuejs.org/zh/config/#vue-config-js

 

3、相關配置配好了,但是在打包時,如何配置(測試、預發、生產)環境呢?

這是我們只需要在根目錄下創建 后綴名為.env(.env.prod  / .env.pre  /  .env.test)的文件,將你需要的環境配進去就可以了

 

4、最后指出配置好環境以后,我們需要在package.json里面配置相應的指令;

“buildTest” :“vue-cli-service build --mode test”,

"buildPre" : "vue-cli-service build --mode pre"

"build" : "vue-cli-service build --mode prod"

// 打包,會把process.env.NODE_ENV設置為步驟4中‘.env.alpha’文件設置的值。

// 注意,這里 “--mode 名字“ 要和步驟2中文件名“.env.名字”名字保持一致


如果你還想在同一項目打不同的生產包,也只需在.env文件里面加上相應的配置,但是與vue-cli 2.0 比較,你需要建多個.env文件,來控制的包

 

三、啟動項目

3.x啟動項目:  

npm run serve

2.x啟動項目:

npm run dev  或   npm run start

四、配置項

vue-cli2.0的域名配置,分為開發環境和生產環境,所以配置域名時,需要在config中的dev.env.js和prod.env.js中分別配置

前面說過,到了3.0 config文件已經被移除,但是多了.env.production和env.development文件,除了文件位置,實際配置起來和2.0沒什么不同

當然,沒了config文件,跨域需要配置域名時,從config/index.js 挪到了vue.config.js中,配置方法不變

在3.0中,vue.config.js中有關於mock的配置

要注意的是:mockjs是用來模擬產生一些虛擬的數據,方便前端在后端接口還沒有開發出來時獨立開發

即使使用了真實的url,但是mockjs攔截了ajax請求,返回的是設定好的本地數據

如果你想正常從后端獲取數據,就要關掉mock的使用,我是直接刪掉的,當然你可以選擇別的辦法

main.js中有一段關於mock.js的描述(注意上線前要去掉你的mock)

另外3.0還多了可視化界面,找到項目,vue ui 命令會直接打開可視化界面,里面可以進行配置、依賴等操作。

 


免責聲明!

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



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