Vue CLI 3 中文文档

发布时间:2019-05-07 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue CLI 3 中文文档脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

翻译文档

文档翻译全貌

前言

之前写了一篇Vue CLI 3.x 版本的简单体验当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲下周会出文档,没想到昨天已经出来了。本着对新功能的好奇心,花了一晚上浏览并翻译了一下文档。

如今最大的变化在配置方面,变成了一种独立配置文件的形式。同时集成了很多功能,整个vue cli更像一个系统,功能的扩展使用插件的形式向系统中自定义注入。

同时,新的文档将开发中的注意事项也列出来了很多,阅读一下以有助于理解前端的开发流程,对之前使用Vue CLI 2的项目也有一定的帮助。

在这里只展示构建目标部分,也算是对上篇文章的一个重要补充,了解详情全貌请查看翻译文档。

构建目标

目前使用CLI可将代码构建为以下几种形式

应用

App

应用模式是默认的模式,这种模式下:

  • 和资源提示会被插入到index.htML文件
  • vendor库们被打包进一个独立的块(chunk)来更好的缓存
  • 10kb大小以下的静态资源被内联进JavaScript
  • public文件中的静态资源被复制到构建输出目录

Library

你可以使用一个独立的入口文件来构建库

vue-cli-service build --target lib --name myLib [entry]
File                     Size                     GzipPEd  dist/myLib.umd.min.js    13.28 kb                 8.42 kb dist/myLib.umd.js        20.95 kb                 10.22 kb dist/myLib.COMmon.js     20.57 kb                 10.09 kb dist/myLib.css           0.33 kb                  0.23 kb

入口文件可以是.js.vue文件。如果没有指定入口文件,将会使用src/App.vue

lib构建输出:

  • dist/myLib.common.js: 通过打包器使用的CommonJS包(不幸的是,webpack还不支持包的ES模块化标准输出)
  • dist/myLib.umd.js: 一个UMD格式的包,可直接在浏览器使用或通过AMD加载器加载
  • dist/myLib.umd.min.js: UMD格式构建的压缩版本
  • dist/myLib.css: 提取出来的CSS样式文件(可通过在vue.config.js中设置css: { extract: false }强制内联)

在库模式下,Vue是被外部化设置的这意味即使你导入了Vue,包也不会打包Vue。如果通过打包器使用此库,它将试图通过依赖关系加载Vue;否则会降级使用全局变量Vue

Web组件

HTML Web component

兼容性

你可以使用一个独立的入口文件来构建库

vue-cli-service build --target wc --name my-element [entry]

这将生成一个JavaScript文件(和他的压缩版本),其中包含所有内容。当script文件在页面中使用时,会使用@vue/web-component-wrapper注册包含目标Vue组件的<;my-element>自定义元素。wrapper会自动代理PRop属性,attr属性,事件和slots插槽。查看更多详情参阅@vue/web-component-wrapper的文档

注意,此包依赖与Vue页面全局可用

该模式允许组件的使用者将Vue作为普通的DOM元素使用:

<script src="https://unpkg.com/vue"></script> <script src="path/to/my-element.js"></script>  <!-- 在纯html或任何其他framework中使用 --> <my-element></my-element>

捆绑打包多个web组件

当构建web组件包时,你还可以使用匹配模式指定多个组件作为打包入口:

vue-cli-service build --target wc --name foo 'src/components/*.vue'

在构建多个web组件时,--name会被作为前缀使用,并且自定义元素名会从组件文件名中被推断出来。比如,使用--name foo且组件名为HelloWorld.vue的话,生成的自定义元素将会被注册为<foo-hello-world>

异步Web组件

兼容性

当指定捆绑打包多个web组件时,这个包会变得相当大,而且用户可能只用包里的部分组件。异步web组件模式下会生成一个代码拆分包,其中包含一个用于在所有组件间提供共享运行时的小的入口文件并且会提前注册所有的自定义元素。然后只有在页面上使用相应的自定义元素的实例时,才会按需获取组件的代码:

vue-cli-service build --target wc-async --name foo 'src/components/*.vue'
File                Size                        Gzipped  dist/foo.0.min.js    12.80 kb                    8.09 kb dist/foo.min.js      7.45 kb                     3.17 kb dist/foo.1.min.js    2.91 kb                     1.02 kb dist/foo.js          22.51 kb                    6.67 kb dist/foo.0.js        17.27 kb                    8.83 kb dist/foo.1.js        5.24 kb                     1.64 kb

然后用户只需要在页面中加载Vue和入口文件:

<script src="https://unpkg.com/vue"></script> <script src="path/to/foo.min.js"></script>  <!-- foo-one的代码块会在它被使用时自动加载 --> <foo-one></foo-one>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!&nbsp;vue,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的Vue CLI 3 中文文档全部内容,希望文章能够帮你解决Vue CLI 3 中文文档所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。