快速了解vue-cli 3.0 新特性


Posted in Javascript onFebruary 28, 2018

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, 点击这里查看 ;

快速了解vue-cli 3.0 新特性 

需要注意的是 在 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 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在编写你的应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。

Javascript 相关文章推荐
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
Feb 23 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
vue.js根据代码运行环境选择baseurl的方法
Feb 28 #Javascript
vue+element实现批量删除功能的示例
Feb 28 #Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 #Javascript
React 组件转 Vue 组件的命令写法
Feb 28 #Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 #Javascript
Vue中this.$router.push参数获取方法
Feb 27 #Javascript
You might like
php横向重复区域显示二法
2008/09/25 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
php实现微信支付之现金红包
2018/05/30 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python实现多人聊天室
2020/03/31 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
汽车专业学生自我评价
2014/01/19 职场文书
创先争优制度
2014/01/21 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
高中语文课后反思
2014/04/27 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
小学少先队活动总结
2015/05/08 职场文书
加薪申请报告范本
2015/05/15 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript