vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,具有开箱即用并且提供简洁的自定义配置等功能。 vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了,但是不可能在本文中列举所有的内容,这篇文章作为一个对比 2.0 升级功能的导读,让你快速了解 3.0 更新的内容。
一.创建项目:
创建项目命令的变化。
vue create my-project
3.0 版本包括默认预设配置 和 用户自定义配置。
自定义功能配置包括以下功能:
可以注意到 3.0 版本直接新加入了 TypeScript 以及 PWA 的支持。
在选择 CSS 预处理后会提示选择哪一种预处理器:
以及 eslint 规范的选择:
最后选择 Babel, PostCSS, ESLint 等自定义配置的存放位置:
选择好后,可以把以上配置存储为预设值,以后通过 vue-cli 创建的其他项目将都采用刚才的配置。
二. 项目目录结构变化:
我们对比发现 vue-cli 3.0 默认项目目录相比 2.0 来说精简了很多。
三.移除了配置文件目录后如何自定义配置。
从 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 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在编写你的应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。