淺談vue-cli 3.0.x 初體驗(yàn)
最近項(xiàng)目正在優(yōu)化。乘著有時間看了一下 vue-cli3.0.x 使用 。感覺還蠻不錯的。 因?yàn)橹绊?xiàng)目使用的 vue-cli 2 創(chuàng)建的,強(qiáng)行使用 eslint讓我們很難受,一些與項(xiàng)目無關(guān)的 “build” 和 “config” ,讓人看著就有一些不爽 。由于公司環(huán)境比較多,需要測試環(huán)境的配置。增加了 “”tt”: “node build/tt-build.js”” 。到 3.0.x 應(yīng)該怎么用? 帶著這些問題來看 3.0.x 感覺就好多了。
1. 官網(wǎng)資料
在學(xué)習(xí)技術(shù)的時候,經(jīng)??床榭垂倬W(wǎng)的資料。因?yàn)槟抢锏馁Y料更新是最快的 。
vue-cli
vue-cli 文檔
2. 安裝環(huán)境
這里犸特頭,推薦大家使用 npm install -g @vue/cli ,通過 yarn global add @vue/cli 還需要進(jìn)行其他設(shè)置,還生成一些文件刪除幾分鐘。
npm install -g @vue/cli # or yarn global add @vue/cli # 使用vue命令,創(chuàng)建項(xiàng)目(不同于cli2.0的init,create) vue create my-project
如果 您使用 yarn global add @vue/cli 安裝需要 進(jìn)入 目錄 。執(zhí)行
yarn // 安裝項(xiàng)目依賴 cd packages/@vue/cli // 目錄 yarn link //添加 link `vue` 執(zhí)行指命 。 vue create my-project // 創(chuàng)建項(xiàng)目 。
3. 多環(huán)境配置
因?yàn)楣居?開發(fā)環(huán)境 ,測試環(huán)境,聯(lián)調(diào)環(huán)境,線上環(huán)境 。減少人為配置,一次配置對原則。所以在2.0.x 增加了“package.json “tt”: “node build/tt-build.js”” 類型的配置,配置不了不少文件。 在 vue-cli 3.0.x 里面支持 “.env” 文件配置 ,我這里增加 “.env.development” , “.env.production”和“.env.test” 配置 。
1. 基本對應(yīng)和默認(rèn)
development is used by vue-cli-service serve production is used by vue-cli-service build test is used by vue-cli-service test
2. 指定配置啟動
增加其他配置,需要下面指定配置 。
"dev-build": "vue-cli-service build --mode development",
3.”.env “配置文件編寫
配置文件內(nèi)容格式如下 ,
VUE_APP_*
例如:”.env.production” 內(nèi)容如下
VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'
4. 調(diào)整用環(huán)境配置
console.log(process.env.VUE_APP_MOCK_URL); process.env.NODE_ENV // 特定 BASE_URL // vue.config.js 配置
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue-cli Eslint在vscode里代碼自動格式化的方法
本篇文章主要介紹了Vue-cli Eslint在vscode里代碼自動格式化的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識,有這方面興趣的朋友參考下吧。2018-01-01vue.js+Echarts開發(fā)圖表放大縮小功能實(shí)例
本篇文章主要介紹了vue.js+Echarts開發(fā)圖表放大縮小功能實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06Vue.js 時間轉(zhuǎn)換代碼及時間戳轉(zhuǎn)時間字符串
這篇文章主要介紹了Vue.js 時間轉(zhuǎn)換代碼及時間戳轉(zhuǎn)時間字符串,需要的朋友可以參考下2018-10-10Vue-resource實(shí)現(xiàn)ajax請求和跨域請求示例
本篇文章主要介紹了Vue-resource實(shí)現(xiàn)ajax請求和跨域請求示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02vue3使用高德地圖,自定義點(diǎn)標(biāo)記、默認(rèn)點(diǎn)聚合樣式、點(diǎn)擊點(diǎn)標(biāo)記獲取信息
這篇文章主要介紹了vue3使用高德地圖,自定義點(diǎn)標(biāo)記、默認(rèn)點(diǎn)聚合樣式、點(diǎn)擊點(diǎn)標(biāo)記獲取信息的相關(guān)知識,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-01-01axios全局請求參數(shù)設(shè)置,請求及返回?cái)r截器的方法
下面小編就為大家分享一篇axios全局請求參數(shù)設(shè)置,請求及返回?cái)r截器的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue 3 中watch 和watchEffect 的新用法
本篇文章主要通過 Options API 和 Composition API 對比 watch 的使用方法,讓大家快速掌握 vue3 中 watch 新用法,需要的朋友可以參考一下哦,希望對大家有所幫助2021-11-11