vue3.0初體驗(yàn)有哪些實(shí)用新功能

尤雨溪:Vue 3.0 計(jì)劃 原文需翻墻
尤雨溪:Vue 3.0 計(jì)劃 掘金譯文

關(guān)于安裝

Vue CLI 的包名稱(chēng)由 vue-cli 改成了 @vue/cli

npm install -g @vue/cli

安裝完成后查看版本
vue --V

項(xiàng)目創(chuàng)建

關(guān)于項(xiàng)目創(chuàng)建终娃,除了命令創(chuàng)建3.x還增加了圖形化界面創(chuàng)建以及管理vue項(xiàng)目
在創(chuàng)建新項(xiàng)目時(shí)還可以混合選用多種集成

  • TypeScript
  • PWA
  • Vue Router & Vuex
  • ESLint / TSLint / Prettier
  • 用 Jest 或 Mocha 進(jìn)行單元測(cè)試
  • 用 Cypress 或者 Nightwatch 進(jìn)行 E2E 測(cè)試

使用命令創(chuàng)建

命令:vue create vueapp

1、使用上下箭頭選擇默認(rèn)設(shè)置還是手動(dòng)選擇功能

Vue CLI v3.0.3
? Please pick a preset:
  default (babel, eslint)
> Manually select features

2蒸甜、按空格鍵選擇你需要的功能棠耕,選完后按回車(chē)

babel:javascript轉(zhuǎn)譯器,將最新版的js語(yǔ)法(es6柠新、es7)轉(zhuǎn)換為現(xiàn)階段瀏覽器可以兼容的js代碼
typescript:使用 TypeScript 書(shū)寫(xiě)源碼
PWA:漸進(jìn)式WEB應(yīng)用
Router:使用vue-router
Vuex:使用vuex
CSS Pre-processors:css預(yù)處理器
Linter / Formatter:代碼規(guī)范標(biāo)準(zhǔn)
Unit Testing:?jiǎn)卧獪y(cè)試
E2E Testing:e2e測(cè)試
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

3窍荧、router是否使用history模式蕊退,history需要服務(wù)器支持詳程梦,情請(qǐng)看這兒https://router.vuejs.org/zh/guide/essentials/history-mode.html
這里我就選no

4衣厘、css預(yù)處理器的選擇压恒,我習(xí)慣用sass

5妆兑、代碼格式化檢測(cè)選擇腺逛,我用的是ide是vscode個(gè)人感覺(jué)搭配插件用著很舒服,所以我選Prettier

6厌小、是否保存剛才的配置,下一次就不用重新配置了罪治,我就直接回車(chē)

7丽声、關(guān)于Babel, PostCSS, ESLint, etc.這些配置文件你是想放在package.json里面還是單獨(dú)放在外面
編輯器一般默認(rèn)會(huì)在項(xiàng)目根目錄下尋找配置文件,這里我就直接回車(chē)選擇In dedicated config files

8觉义、是否保存為未來(lái)項(xiàng)目的預(yù)配置嗎雁社,我也是直接回車(chē)

最后配置如下

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes

圖形化界面

圖形化操作非常方便,我就不一步步演示了晒骇,主要懶得貼圖 (°ー°〃)

執(zhí)行npm命令
vue ui
訪問(wèn) http://localhost:8000 你就可以創(chuàng)建霉撵,管理磺浙,導(dǎo)入項(xiàng)目

實(shí)用新功能

  • node_modules
  • public
  • src
  • .browserslistrc
  • .eslintrc.js
  • .gitignore
  • babel.config.js
  • package.json
  • postcss.config.js
  • README.md

以上是項(xiàng)目根目錄,3.x對(duì)比2.x文件結(jié)構(gòu)明顯精簡(jiǎn)了不少徒坡,多了一個(gè)public文件夾用于存放靜態(tài)文件少了config撕氧、build等一系列的配置文件,這些配置文件都被放在了node_modules@vue文件下

browserslist

根目錄中多了一個(gè).browserslist文件喇完,可以指定項(xiàng)目的目標(biāo)瀏覽器的范圍
用于轉(zhuǎn)譯的 JavaScript 特性和添加CSS 瀏覽器前綴呵曹,可以減少兼容代碼提高代碼質(zhì)量
如果想少一個(gè)文件,你也可以在package.json中添加browserslist字段何暮,參數(shù)是一個(gè)數(shù)組

這是默認(rèn)設(shè)置奄喂,兼容所有最新版本,不支持ie8以下
> 1%
last 2 versions
not ie <= 8

使用 npx browserslist 可以查看項(xiàng)目的瀏覽器兼容情況
將需要支持的目標(biāo)瀏覽器參數(shù)放在文件中就好

參數(shù) 說(shuō)明
> 1% 全球超過(guò)1%人使用的瀏覽器
> 5% in US 使用美國(guó)使用情況統(tǒng)計(jì)海洼,接受兩個(gè)字母的國(guó)家/地區(qū)代碼
> 5% in my stats 使用自定義使用數(shù)據(jù)
last 2 versions 所有瀏覽器兼容到最后兩個(gè)版本根據(jù)CanIUse.com追蹤的版本
Firefox ESR 火狐最新版本
Firefox > 20 指定版本范圍
not ie <=8 方向排除部分版本
Firefox 12.1 指定瀏覽器版本
since 2013 2013年之后發(fā)布的所有版本

更多請(qǐng)查看官方文檔

vue-cli服務(wù)

在一個(gè) Vue CLI 項(xiàng)目中坏逢,@vue/cli-service 安裝了一個(gè)名為 vue-cli-service 的命令。
你可以在 npm scripts 中以 vue-cli-service是整、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問(wèn)這個(gè)命令
Vue CLI 項(xiàng)目有三個(gè)模式: development 模式用于啟動(dòng)肖揣,production 模式用于打包和e2e測(cè)試,test 模式用于unit測(cè)試

啟動(dòng)
serve:vue-cli-service serve

  --open    在服務(wù)器啟動(dòng)時(shí)打開(kāi)瀏覽器

  --copy    在服務(wù)器啟動(dòng)時(shí)將 URL 復(fù)制到剪切版

  --mode    指定環(huán)境模式 (默認(rèn)值:development)

  --host    指定 host (默認(rèn)值:0.0.0.0)

  --port    指定 port (默認(rèn)值:8080)

  --https   使用 https (默認(rèn)值:false)

打包
build:vue-cli-service build

  --modern 使用現(xiàn)代模式構(gòu)建應(yīng)用龙优,為現(xiàn)代瀏覽器交付原生支持的 ES2015 代碼事秀,并生成一個(gè)兼容老瀏覽器的包用來(lái)自動(dòng)回退彤断。

  --target 允許你將項(xiàng)目中的任何組件以一個(gè)庫(kù)或 Web Components 組件的方式進(jìn)行構(gòu)建。更多細(xì)節(jié)請(qǐng)查閱構(gòu)建目標(biāo)易迹。

  --report 和 --report-json 會(huì)根據(jù)構(gòu)建統(tǒng)計(jì)生成報(bào)告宰衙,它會(huì)幫助你分析包中包含的模塊們的大小

測(cè)試
 test: vue-cli-service test:e2e  端到端測(cè)試
         vue-cli-service test:unit  單元測(cè)試

現(xiàn)代模式

為了兼容那些不支持js新特性的瀏覽器我們需要Babel轉(zhuǎn)譯睹欲,但轉(zhuǎn)譯后的代碼笨重冗長(zhǎng),這次3.x提供了一個(gè)現(xiàn)代模式

npx vue-cli-service build --modern

這個(gè)命令會(huì)產(chǎn)生兩個(gè)應(yīng)用的版本:一個(gè)現(xiàn)代版的包窘疮,面向支持 ES modules 的現(xiàn)代瀏覽器考余,另一個(gè)舊版的包,面向不支持的舊瀏覽器
而且不需要我們手動(dòng)去部署和設(shè)置什么楚堤,簡(jiǎn)直很貼心

  • 現(xiàn)代版的包會(huì)通過(guò) <script type="module"> 在被支持的瀏覽器中加載含懊;它們還會(huì)使用 <link rel="modulepreload"> 進(jìn)行預(yù)加載
  • 舊版的包會(huì)通過(guò) <script nomodule> 加載衅胀,并會(huì)被支持 ES modules 的瀏覽器忽略
  • 一個(gè)針對(duì) Safari 10 中 <script nomodule> 的修復(fù)會(huì)被自動(dòng)注入

插件的添加

在一個(gè)已經(jīng)被創(chuàng)建好的項(xiàng)目中安裝一個(gè)插件,使用vue add命令

CLI 插件安裝

每個(gè) CLI 插件都會(huì)包含一個(gè) (用來(lái)創(chuàng)建文件的) 生成器和一個(gè) (用來(lái)調(diào)整 webpack 核心配置和注入命令的) 運(yùn)行時(shí)插件
對(duì)于這種cli插件需要加入@vue的前綴,這個(gè)命令將 @vue/eslint 解析為完整的包名 @vue/cli-plugin-eslint雏门,然后從 npm 安裝它掸掏,調(diào)用它的生成器

插件添加
vue add @vue/eslint

向被安裝的插件傳遞生成器選項(xiàng) (這樣做會(huì)跳過(guò)命令提示)
vue add @vue/eslint --config airbnb --lintOn save

第三方插件安裝

安裝并調(diào)用 vue-cli-plugin-apollo,不帶 @vue 前綴募闲,該命令會(huì)換作解析一個(gè) unscoped 的包
執(zhí)行此命令后src里會(huì)創(chuàng)建一個(gè)plugins文件夾愿待,里面會(huì)自動(dòng)生成關(guān)于插件的配置文件
vue add axios

基于一個(gè)指定的 scope 使用第三方插件,如果一個(gè)插件名為 @foo/vue-cli-plugin-bar要出,你可以這樣添加它:
vue add @foo/bar

配置修改

例:向所有 Sass 樣式傳入共享的全局變量
在根目錄新建一個(gè)vue.config.js农渊,加入以下配置

module.exports = {
  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項(xiàng)
      sass: {
        // @/ 是 src/ 的別名
        // 所以這里假設(shè)你有 `src/variables.scss` 這個(gè)文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}

打包后路徑問(wèn)題

在vue.config.js文件中加入'baseUrl: './''

module.exports = {
    //...
    baseUrl: './'
    //...
}

雖然官方說(shuō)這個(gè)文件會(huì)被 @vue/cli-service 自動(dòng)加載,但如果你啟動(dòng)項(xiàng)目用的是npm run serve况脆,那么你最好使用npx vue-cli-service serve重啟一下

參考文章

官方文檔 https://cli.vuejs.org/zh/guide/
browserslist的github https://github.com/browserslist/browserslist
https://mp.weixin.qq.com/s/hfr2Q3FXZFIdqM_r8HrLwQ

歡迎留言交流 (′▽`???)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末批糟,一起剝皮案震驚了整個(gè)濱河市看铆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌否淤,老刑警劉巖棠隐,帶你破解...
    沈念sama閱讀 217,542評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異啰扛,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)隐解,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)煞茫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人续徽,你說(shuō)我怎么就攤上這事∪野妫” “怎么了土全?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,912評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵裹匙,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我概页,道長(zhǎng),這世上最難降的妖魔是什么技掏? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,449評(píng)論 1 293
  • 正文 為了忘掉前任项鬼,我火速辦了婚禮,結(jié)果婚禮上鸠真,老公的妹妹穿的比我還像新娘龄毡。我一直安慰自己,他們只是感情好沦零,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布路操。 她就那樣靜靜地躺著千贯,像睡著了一般程奠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上己沛,一...
    開(kāi)封第一講書(shū)人閱讀 51,370評(píng)論 1 302
  • 那天距境,我揣著相機(jī)與錄音,去河邊找鬼师幕。 笑死诬滩,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的疼鸟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,193評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼浩淘,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼吴攒!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起署惯,我...
    開(kāi)封第一講書(shū)人閱讀 39,074評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤镣隶,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體稻爬,經(jīng)...
    沈念sama閱讀 45,505評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡桅锄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評(píng)論 3 335
  • 正文 我和宋清朗相戀三年样眠,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了翠肘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,841評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡被丧,死狀恐怖绪妹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情黄选,我是刑警寧澤婶肩,帶...
    沈念sama閱讀 35,569評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站民镜,受9級(jí)特大地震影響苗膝,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜辱揭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評(píng)論 3 328
  • 文/蒙蒙 一问窃、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧域庇,春花似錦、人聲如沸熟呛。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,783評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至椎瘟,卻和暖如春侄旬,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背儡羔。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,918評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工笔链, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鉴扫。 一個(gè)月前我還...
    沈念sama閱讀 47,962評(píng)論 2 370
  • 正文 我出身青樓坪创,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親莱预。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容