快速了解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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 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
德生1994机评
2021/03/02 无线电
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP 中常量的知识整理
2017/04/14 PHP
js活用事件触发对象动作
2008/08/10 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
Python简单实现控制电脑的方法
2018/01/22 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
python3让print输出不换行的方法
2020/08/24 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
社区党员先进事迹
2014/01/22 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
医院见习总结
2015/06/24 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书