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>

<h4>捆绑打包多个web组件</h4>
<p>当构建web组件包时，你还可以使用匹配模式指定多个组件作为打包入口：</p>

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

<p>在构建多个web组件时，<code>--name</code>会被作为前缀使用，并且自定义元素名会从组件文件名中被推断出来。比如，使用<code>--name foo</code>且组件名为<code>HelloWorld.vue</code>的话，生成的自定义元素将会被注册为<code>&lt;foo-hello-world&gt;</code>。</p>
<h3>异步Web组件</h3>
<blockquote><a href="https://github.com/vuejs/vue-web-component-wrapper#compatibility" rel="nofollow noreferrer">兼容性</a></blockquote>
<p>当指定捆绑打包多个web组件时，这个包会变得相当大，而且用户可能只用包里的部分组件。异步web组件模式下会生成一个代码拆分包，其中包含一个用于在所有组件间提供共享运行时的小的入口文件并且会提前注册所有的自定义元素。然后只有在页面上使用相应的自定义元素的实例时，才会按需获取组件的代码：</p>

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

<p>然后用户只需要在页面中加载Vue和入口文件：</p>
```&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
&lt;script src="path/to/foo.min.js"&gt;&lt;/script&gt;

&lt;!-- foo-one的代码块会在它被使用时自动加载 --&gt;
&lt;foo-one&gt;&lt;/foo-one&gt;

原文地址：https://segmentfault.com/a/1190000013249668