點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

快速了解vue-cli 3.0 新特性

來源：懂視網責編：小采時間：2020-11-27 22:18:40

快速了解vue-cli 3.0 新特性

快速了解vue-cli 3.0 新特性:vue-cli 是 vue 官方團隊推出的一款快速開發 vue 項目的構建工具，具有開箱即用并且提供簡潔的自定義配置等功能。 vue-cli 從 2.0 到 3.0 的升級有太多的新東西可以說了，但是不可能在本文中列舉所有的內容，這篇文章作為一個對比 2.0 升級功能的導讀，

推薦度：

點擊下載本文 文檔為doc格式

導讀快速了解vue-cli 3.0 新特性:vue-cli 是 vue 官方團隊推出的一款快速開發 vue 項目的構建工具，具有開箱即用并且提供簡潔的自定義配置等功能。 vue-cli 從 2.0 到 3.0 的升級有太多的新東西可以說了，但是不可能在本文中列舉所有的內容，這篇文章作為一個對比 2.0 升級功能的導讀，

vue-cli 是 vue 官方團隊推出的一款快速開發 vue 項目的構建工具，具有開箱即用并且提供簡潔的自定義配置等功能。 vue-cli 從 2.0 到 3.0 的升級有太多的新東西可以說了，但是不可能在本文中列舉所有的內容，這篇文章作為一個對比 2.0 升級功能的導讀，讓你快速了解 3.0 更新的內容。

一.創建項目：

創建項目命令的變化。

vue create my-project

3.0 版本包括默認預設配置和用戶自定義配置。

自定義功能配置包括以下功能：

TypeScript

Progressive Web App (PWA) Support

Router

Vuex

CSS Pre-processors

Linter / Formatter

Unit Testing

E2E Testing

可以注意到 3.0 版本直接新加入了 TypeScript 以及 PWA 的支持。

在選擇 CSS 預處理后會提示選擇哪一種預處理器：

SCSS/SASS

LESS

Stylus

以及 eslint 規范的選擇：

ESLint with error prevention only

ESLint + Airbnb config

ESLint + Standard config

ESLint + Prettier

最后選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置：

In dedicated config files

In package.json

選擇好后，可以把以上配置存儲為預設值，以后通過 vue-cli 創建的其他項目將都采用剛才的配置。

二. 項目目錄結構變化：

我們對比發現 vue-cli 3.0 默認項目目錄相比 2.0 來說精簡了很多。

移除了配置文件目錄， config 和 build 文件夾。

移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動到 public 中。

在 src 文件夾中新增了 views 文件夾，用于分類視圖組件和公共組件。

三.移除了配置文件目錄后如何自定義配置。

從 3.0 版本開始，在項目的根目錄放置一個 vue.config.js 文件, 可以配置該項目的很多方面。

vue.config.js 應該導出一個對象，例如：

module.exports = {
 baseUrl: '/',
 outputDir: 'dist',
 lintOnSave: true,
 compiler: false,
 // 調整內部的 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 => {}
 }
 ....
}

調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個對象，該對象將會被 webpack-merge 合并入最終的 webpack 配置。

示例代碼：配置 webpack 新增一個插件。

// vue.config.js
module.exports = {
 configureWebpack: {
 plugins: [
 new MyAwesomeWebpackPlugin()
 ]
 }
}

修改插件選項的參數你需要熟悉 webpack-chain 的 API 并閱讀一些源碼以便了解如何權衡這個選項的全部配置項，但是它給了你比直接修改 webpack 配置中的值更靈活且安全的方式。

// vue.config.js
module.exports = {
chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* new args to pass to html-webpack-plugin's constructor */]
      })
}
}
注意：當我們更改一個webpack配置時候，可以通過 vue inspect > output.js 輸出完整的配置清單，注意它輸出的并不是一個有效的 webpack 配置文件，而是一個用于審查的被序列化的格式。

查看更多細節

四. ESLint、Babel、browserslist 相關配置：

Babel 可以通過 .babelrc 或 package.json 中的 babel 字段進行配置。

ESLint 可以通過 .eslintrc 或 package.json 文件中的 eslintConfig 字段進行配置。

你可能注意到了 package.json 中的 browserslist 字段指定了該項目的目標瀏覽器支持范圍。

五. 關于 public 目錄的調整。

vue 約定 public/index.html 作為入口模板會通過 html-webpack-plugin 插件處理。在構建過程中，資源鏈接將會自動注入其中。除此之外，vue-cli 也自動注入資源提示( preload/prefetch ), 在啟用 PWA 插件時注入 manifest/icon 鏈接, 并且引入(inlines) webpack runtime / chunk manifest 清單已獲得最佳性能。

在 JavaScript 或者 SCSS 中通過相對路徑引用的資源會經過 webpack 處理。放置在 public 文件的資源可以通過絕對路徑引用，這些資源將會被復制，而不經過 webpack 處理。

小提示：圖片最好使用相對路徑經過 webpack 處理，這樣可以避免很多因為修改網站根目錄導致的圖片404問題。

六. 新增功能：

1. 對 TypeScript 的支持。

在 3.0 版本中，選擇啟用 TypeScript 語法后，vue 組件的書寫格式有特定的規范。

示例代碼：

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) { }
}

以上代碼相當于

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
 }
 }
})

更多詳細內容請關注這里；

2. 對 PWA 的支持。

當我們選擇啟用 PWA 功能時，在打包生成的代碼時會默認生成 service-worker.js 和 manifest.json 相關文件。如果你不了解 PWA，點擊這里查看 ;

需要注意的是在 manifest.json 生成的圖標信息，可以在 public/img 目錄下替換。

默認情況 service-worker 采用的是 precache ，可以通過配置 pwa.workboxPluginMode 自定義緩存策略。詳情

配置示例

// Inside vue.config.js
module.exports = {
 // ...其它 vue-cli 插件選項...
 pwa: {
 workboxPluginMode: 'InjectManifest',
 workboxOptions: {
 // swSrc 中 InjectManifest 模式下是必填的。
 swSrc: 'dev/sw.js',
 // ...其它 Workbox 選項...
 },
 },
};

總結：

vue-cli 致力于將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基于智能的默認配置即可平穩銜接，這樣你可以專注在編寫你的應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

快速了解vue-cli 3.0 新特性

推薦度：

點擊下載本文 文檔為doc格式

標簽：快速新特性 3.0

熱門焦點

快速了解vue-cli 3.0 新特性

快速了解vue-cli 3.0 新特性

快速了解vue-cli 3.0 新特性

最新推薦

猜你喜歡

熱門推薦