快速了解vue-cli 3.0 新特性
vue-cli 是 vue 官方團(tuán)隊(duì)推出的一款快速開(kāi)發(fā) vue 項(xiàng)目的構(gòu)建工具,具有開(kāi)箱即用并且提供簡(jiǎn)潔的自定義配置等功能。 vue-cli 從 2.0 到 3.0 的升級(jí)有太多的新東西可以說(shuō)了,但是不可能在本文中列舉所有的內(nèi)容,這篇文章作為一個(gè)對(duì)比 2.0 升級(jí)功能的導(dǎo)讀,讓你快速了解 3.0 更新的內(nèi)容。
一.創(chuàng)建項(xiàng)目:
創(chuàng)建項(xiàng)目命令的變化。
vue create my-project
3.0 版本包括默認(rèn)預(yù)設(shè)配置 和 用戶自定義配置。
自定義功能配置包括以下功能:
- TypeScript
- Progressive Web App (PWA) Support
- Router
- Vuex
- CSS Pre-processors
- Linter / Formatter
- Unit Testing
- E2E Testing
可以注意到 3.0 版本直接新加入了 TypeScript 以及 PWA 的支持。
在選擇 CSS 預(yù)處理后會(huì)提示選擇哪一種預(yù)處理器:
- SCSS/SASS
- LESS
- Stylus
以及 eslint 規(guī)范的選擇:
- ESLint with error prevention only
- ESLint + Airbnb config
- ESLint + Standard config
- ESLint + Prettier
最后選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置:
- In dedicated config files
- In package.json
選擇好后,可以把以上配置存儲(chǔ)為預(yù)設(shè)值,以后通過(guò) vue-cli 創(chuàng)建的其他項(xiàng)目將都采用剛才的配置。
二. 項(xiàng)目目錄結(jié)構(gòu)變化:
我們對(duì)比發(fā)現(xiàn) vue-cli 3.0 默認(rèn)項(xiàng)目目錄相比 2.0 來(lái)說(shuō)精簡(jiǎn)了很多。
- 移除了配置文件目錄, config 和 build 文件夾。
- 移除了 static 文件夾,新增 public 文件夾,并且 index.html 移動(dòng)到 public 中。
- 在 src 文件夾中新增了 views 文件夾,用于分類(lèi) 視圖組件 和 公共組件。
三.移除了配置文件目錄后如何自定義配置。
從 3.0 版本開(kāi)始,在項(xiàng)目的根目錄放置一個(gè) vue.config.js 文件, 可以配置該項(xiàng)目的很多方面。
vue.config.js 應(yīng)該導(dǎo)出一個(gè)對(duì)象,例如:
module.exports = { baseUrl: '/', outputDir: 'dist', lintOnSave: true, compiler: false, // 調(diào)整內(nèi)部的 webpack 配置。 // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // 配置 webpack-dev-server 行為。 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理 proxy: null, // string | Object before: app => {} } .... }
調(diào)整 webpack 配置最簡(jiǎn)單的方式就是在 vue.config.js
中的 configureWebpack
選項(xiàng)提供一個(gè)對(duì)象,該對(duì)象將會(huì)被 webpack-merge
合并入最終的 webpack 配置。
示例代碼:配置 webpack 新增一個(gè)插件。
// vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } }
修改插件選項(xiàng)的參數(shù)你需要熟悉 webpack-chain
的 API 并閱讀一些源碼以便了解如何權(quán)衡這個(gè)選項(xiàng)的全部配置項(xiàng),但是它給了你比直接修改 webpack 配置中的值更靈活且安全的方式。
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
return [/* new args to pass to html-webpack-plugin's constructor */]
})
}
}
注意:當(dāng)我們更改一個(gè)webpack配置時(shí)候,可以通過(guò) vue inspect > output.js 輸出完整的配置清單,注意它輸出的并不是一個(gè)有效的 webpack 配置文件,而是一個(gè)用于審查的被序列化的格式。
四. ESLint、Babel、browserslist 相關(guān)配置:
Babel 可以通過(guò) .babelrc 或 package.json 中的 babel 字段進(jìn)行配置。
ESLint 可以通過(guò) .eslintrc 或 package.json 文件中的 eslintConfig 字段進(jìn)行配置。
你可能注意到了 package.json 中的 browserslist 字段指定了該項(xiàng)目的目標(biāo)瀏覽器支持范圍。
五. 關(guān)于 public 目錄的調(diào)整。
vue 約定 public/index.html
作為入口模板會(huì)通過(guò) html-webpack-plugin
插件處理。在構(gòu)建過(guò)程中,資源鏈接將會(huì)自動(dòng)注入其中。除此之外,vue-cli 也自動(dòng)注入資源提示( preload/prefetch ), 在啟用 PWA 插件時(shí)注入 manifest/icon
鏈接, 并且引入(inlines) webpack runtime / chunk manifest
清單已獲得最佳性能。
在 JavaScript 或者 SCSS 中通過(guò) 相對(duì)路徑 引用的資源會(huì)經(jīng)過(guò) webpack 處理。放置在 public 文件的資源可以通過(guò)絕對(duì)路徑引用,這些資源將會(huì)被復(fù)制,而不經(jīng)過(guò) webpack 處理。
小提示:圖片最好使用相對(duì)路徑經(jīng)過(guò) webpack 處理,這樣可以避免很多因?yàn)樾薷木W(wǎng)站根目錄導(dǎo)致的圖片404問(wèn)題。
六. 新增功能:
1. 對(duì) TypeScript 的支持。
在 3.0 版本中,選擇啟用 TypeScript 語(yǔ)法后,vue 組件的書(shū)寫(xiě)格式有特定的規(guī)范。
示例代碼:
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator' const s = Symbol('baz') @Component export class MyComponent extends Vue { @Emit() addToCount(n: number){ this.count += n } @Emit('reset') resetCount(){ this.count = 0 } @Inject() foo: string @Inject('bar') bar: string @Inject(s) baz: string @Model('change') checked: boolean @Prop() propA: number @Prop({ default: 'default value' }) propB: string @Prop([String, Boolean]) propC: string | boolean @Provide() foo = 'foo' @Provide('bar') baz = 'bar' @Watch('child') onChildChanged(val: string, oldVal: string) { } @Watch('person', { immediate: true, deep: true }) onPersonChanged(val: Person, oldVal: Person) { } }
以上代碼相當(dāng)于
const s = Symbol('baz') export const MyComponent = Vue.extend({ name: 'MyComponent', inject: { foo: 'foo', bar: 'bar', [s]: s }, model: { prop: 'checked', event: 'change' }, props: { checked: Boolean, propA: Number, propB: { type: String, default: 'default value' }, propC: [String, Boolean], }, data () { return { foo: 'foo', baz: 'bar' } }, provide () { return { foo: this.foo, bar: this.baz } }, methods: { addToCount(n){ this.count += n this.$emit("add-to-count", n) }, resetCount(){ this.count = 0 this.$emit("reset") }, onChildChanged(val, oldVal) { }, onPersonChanged(val, oldVal) { } }, watch: { 'child': { handler: 'onChildChanged', immediate: false, deep: false }, 'person': { handler: 'onPersonChanged', immediate: true, deep: true } } })
更多詳細(xì)內(nèi)容請(qǐng)關(guān)注 這里 ;
2. 對(duì) PWA 的支持。
當(dāng)我們選擇啟用 PWA 功能時(shí),在打包生成的代碼時(shí)會(huì)默認(rèn)生成 service-worker.js 和 manifest.json 相關(guān)文件。如果你不了解 PWA, 點(diǎn)擊這里查看 ;
需要注意的是 在 manifest.json 生成的圖標(biāo)信息,可以在 public/img 目錄下替換。
默認(rèn)情況 service-worker 采用的是 precache ,可以通過(guò)配置 pwa.workboxPluginMode 自定義緩存策略。詳情
配置示例
// Inside vue.config.js module.exports = { // ...其它 vue-cli 插件選項(xiàng)... pwa: { workboxPluginMode: 'InjectManifest', workboxOptions: { // swSrc 中 InjectManifest 模式下是必填的。 swSrc: 'dev/sw.js', // ...其它 Workbox 選項(xiàng)... }, }, };
總結(jié):
vue-cli 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接,這樣你可以專(zhuān)注在編寫(xiě)你的應(yīng)用上,而不必花好幾天去糾結(jié)配置的問(wèn)題。與此同時(shí),它也為每個(gè)工具提供了調(diào)整配置的靈活性。
- 深入理解基于vue-cli的vuex配置
- 詳解如何在vue-cli中使用vuex
- vue-cli下的vuex的簡(jiǎn)單Demo圖解(實(shí)現(xiàn)加1減1操作)
- vue-cli整合vuex的時(shí)候,修改actions和mutations,實(shí)現(xiàn)熱部署的方法
- 在Vue-cli里應(yīng)用Vuex的state和mutations方法
- Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)
- 10分鐘上手vue-cli 3.0 入門(mén)介紹
- vue-cli3.0 特性解讀
- 詳解如何配置vue-cli3.0的vue.config.js
- Vue-cli3項(xiàng)目配置Vue.config.js實(shí)戰(zhàn)記錄
- vue-cli axios請(qǐng)求方式及跨域處理問(wèn)題
- Vue-CLI與Vuex使用方法實(shí)例分析
相關(guān)文章
vue移動(dòng)端設(shè)置全屏背景的項(xiàng)目實(shí)踐
本vue移動(dòng)端項(xiàng)目設(shè)置全屏背景,關(guān)鍵是要找對(duì)文件,然后添加background屬性即可,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08vue屬性props默認(rèn)類(lèi)型的寫(xiě)法介紹
這篇文章主要介紹了vue屬性props默認(rèn)類(lèi)型的寫(xiě)法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令
本文主要介紹了vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果附demo
這篇文章主要介紹了使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果 demo,需要的朋友可以參考下2019-05-05vue3中使用router4 keepalive的問(wèn)題
這篇文章主要介紹了vue3中使用router4 keepalive的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08基于VUE.JS的移動(dòng)端框架Mint UI的使用
本篇文章主要介紹了基于VUE.JS的移動(dòng)端框架Mint UI的使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)
這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01