首頁 > web前端 > js教程 > 主體

詳細為你解讀vue-cli 3.0 新功能(詳細教學)

亚连
發布: 2018-06-04 10:48:55
原創
4576 人瀏覽過

vue-cli 是 vue 官方團隊推出的一款快速開發 vue 專案的建置工具,具有開箱即用並且提供簡潔的自訂設定等功能。這篇文章主要介紹了快速了解vue-cli 3.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')##       .plugin('html')##   (args => {
        return [/* new args to pass to html-webpack-plugin's constructor */]
      })
  }##}##webpack
webpackP:#webpackcg##webcpack:#webpackP:#webpacko##cwebpacko##Swebpacko##Swebpacko##Swebpacko##Swebpack)注意一個重點:#webpackcg配置時候,可以透過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 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在编写你的应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在angularjs中使用select 赋值 ng-options配置方法该怎么做?

在AngularJS中使用select加载数据选中默认值的方法该怎么处理?

怎样在vue中使用ts(详细教程)

以上是詳細為你解讀vue-cli 3.0 新功能(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板