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 項目名稱

二、目錄的區別

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

三、啟動項目

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