脚本宝典收集整理的这篇文章主要介绍了

Vue CLI 3 中文文档

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">翻译文档</h2> <p><a href="https://github.com/toBeTheLight/vue-cli-3.x-doc-cn/blob/dev/README.md" rel="nofollow noreferrer" target="_blank"><strong>文档翻译全貌</strong></a></p> <h2 id="articleHeader1">前言</h2> <p>之前写了一篇<a href="https://segmentfault.com/a/1190000013090943">Vue CLI 3.x 版本的简单体验</a>,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到<code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> CLI 3</code>接近Beta版的提示,作者尤雨溪也讲下周会出文档,没想到昨天已经出来了。本着对新功能的好奇心,花了一晚上浏览并翻译了一下文档。</p> <p>如今最大的变化在配置方面,变成了一种独立配置文件的形式。同时集成了很多功能,整个<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> CLI更像一个系统,功能的扩展使用插件的形式向系统中自定义注入。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>同时,新的文档将开发中的注意事项也列出来了很多,阅读一下以有助于理解前端的开发流程,对之前使用<code><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> CLI 2</code>的项目也有一定的帮助。</p> <p>在这里只展示<strong>构建目标</strong>部分,也算是对上篇文章的一个重要补充,了解详情全貌请查看翻译文档。</p> <h2 id="articleHeader2">构建目标</h2> <p><em>目前使用CLI可将代码构建为以下几种形式</em></p> <h3 id="articleHeader3">应用</h3> <p><em>App</em></p> <p>应用模式是默认的模式,这种模式下:</p> <ul> <li>资源和资源提示会被插入到<code>index.html</code>文件</li> <li>vendor库们被打包进一个独立的块(chunk)来更好的缓存</li> <li>10kb大小以下的静态资源被内联进JavaScript</li> <li> <code>public</code>文件中的静态资源被复制到构建输出目录</li> </ul> <h3 id="articleHeader4">库</h3> <p><em>Library</em></p> <p>你可以使用一个独立的入口文件来构建库</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue-cli-service build --target lib --name myLib [entry]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code style="word-break: break-word; white-space: initial;">vue-cli-service build --<span class="hljs-keyword">target</span> lib --<span class="hljs-keyword">name</span> myLib [<span class="hljs-built_in">entry</span>]</code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code><span class="hljs-keyword">File</span> <span class="hljs-built_in">Size</span> Gzipped dist/myLib.umd.<span class="hljs-built_in">min</span>.js <span class="hljs-number">13.28</span> kb <span class="hljs-number">8.42</span> kb dist/myLib.umd.js <span class="hljs-number">20.95</span> kb <span class="hljs-number">10.22</span> kb dist/myLib.<span class="hljs-keyword">common</span>.js <span class="hljs-number">20.57</span> kb <span class="hljs-number">10.09</span> kb dist/myLib.css <span class="hljs-number">0.33</span> kb <span class="hljs-number">0.23</span> kb</code></pre> <p>入口文件可以是<code>.js</code>或<code>.vue</code>文件。如果没有指定入口文件,将会使用<code>src/App.vue</code>。</p> <p>lib构建输出:</p> <ul> <li> <code>dist/myLib.common.js</code>: 通过打包器使用的CommonJS包(不幸的是,webpack还不支持包的ES模块化标准输出)</li> <li> <code>dist/myLib.umd.js</code>: 一个UMD格式的包,可直接在浏览器使用或通过AMD加载器加载</li> <li> <code>dist/myLib.umd.min.js</code>: UMD格式构建的压缩版本</li> <li> <code>dist/myLib.css</code>: 提取出来的<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>样式文件(可通过在<code>vue.config.js</code>中设置<code>css: { extract: false }</code>强制内联)</li> </ul> <p><strong>在库模式下,Vue是被外部化设置的</strong>这意味即使你导入了Vue,包也不会打包Vue。如果通过打包器使用此库,它将试图通过依赖关系加载Vue;否则会降级使用全局变量<code>Vue</code>。</p> <h3 id="articleHeader5">Web组件</h3> <p><em><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> Web Component</em></p> <blockquote><p><a href="https://github.com/vuejs/vue-web-component-wrapper#compatibility" rel="nofollow noreferrer" target="_blank">兼容性</a></p></blockquote> <p>你可以使用一个独立的入口文件来构建库</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue-cli-service build --target wc --name my-element [entry]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code style="word-break: break-word; white-space: initial;">vue-cli-service build --<span class="hljs-keyword">target</span> wc --<span class="hljs-keyword">name</span> my-element [<span class="hljs-built_in">entry</span>]</code></pre> <p>这将生成一个JavaScript文件(和他的压缩版本),其中包含所有内容。当script文件在页面中使用时,会使用<code>@vue/web-component-wrapper</code>注册包含目标Vue组件的<code>&lt;my-element&gt;</code>自定义元素。wrapper会自动代理prop属性,attr属性,事件和slots插槽。查看更多详情参阅<a href="https://github.com/vuejs/vue-web-component-wrapper" rel="nofollow noreferrer" target="_blank"><code>@vue/web-component-wrapper</code>的文档</a>。</p> <p><strong>注意,此包依赖与Vue页面全局可用</strong></p> <p>该模式允许组件的使用者将Vue作为普通的<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>元素使用:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;https://unpkg.com/vue&quot;></script><br /> <script src=&quot;path/to/my-element.js&quot;></script></p> <p><!-- 在纯html或任何其他framework中使用 --><br /> <my-element></my-element>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"path/to/my-element.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- 在纯html或任何其他framework中使用 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">my-element</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-element</span>&gt;</span></code></pre> <h4>捆绑打包多个web组件</h4> <p>当构建web组件包时,你还可以使用匹配模式指定多个组件作为打包入口:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue-cli-service build --target wc --name foo 'src/components/*.vue'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code style="word-break: break-word; white-space: initial;">vue-cli-service build --<span class="hljs-keyword">target</span> wc --<span class="hljs-keyword">name</span> foo <span class="hljs-string">'src/components/*.vue'</span></code></pre> <p>在构建多个web组件时,<code>--name</code>会被作为前缀使用,并且自定义元素名会从组件文件名中被推断出来。比如,使用<code>--name foo</code>且组件名为<code>HelloWorld.vue</code>的话,生成的自定义元素将会被注册为<code>&lt;foo-hello-world&gt;</code>。</p> <h3 id="articleHeader6">异步Web组件</h3> <blockquote><p><a href="https://github.com/vuejs/vue-web-component-wrapper#compatibility" rel="nofollow noreferrer" target="_blank">兼容性</a></p></blockquote> <p>当指定捆绑打包多个web组件时,这个包会变得相当大,而且用户可能只用包里的部分组件。异步web组件模式下会生成一个代码拆分包,其中包含一个用于在所有组件间提供共享运行时的小的入口文件并且会提前注册所有的自定义元素。然后只有在页面上使用相应的自定义元素的实例时,才会按需获取组件的代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue-cli-service build --target wc-async --name foo 'src/components/*.vue'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;">vue-cli-service build --target wc-<span class="hljs-keyword">async</span> --name foo <span class="hljs-string">'src/components/*.vue'</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code><span class="hljs-keyword">File</span> <span class="hljs-built_in">Size</span> Gzipped dist/foo<span class="hljs-number">.0.</span><span class="hljs-built_in">min</span>.js <span class="hljs-number">12.80</span> kb <span class="hljs-number">8.09</span> kb dist/foo.<span class="hljs-built_in">min</span>.js <span class="hljs-number">7.45</span> kb <span class="hljs-number">3.17</span> kb dist/foo<span class="hljs-number">.1.</span><span class="hljs-built_in">min</span>.js <span class="hljs-number">2.91</span> kb <span class="hljs-number">1.02</span> kb dist/foo.js <span class="hljs-number">22.51</span> kb <span class="hljs-number">6.67</span> kb dist/foo<span class="hljs-number">.0.</span>js <span class="hljs-number">17.27</span> kb <span class="hljs-number">8.83</span> kb dist/foo<span class="hljs-number">.1.</span>js <span class="hljs-number">5.24</span> kb <span class="hljs-number">1.64</span> kb</code></pre> <p>然后用户只需要在页面中加载Vue和入口文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;https://unpkg.com/vue&quot;></script><br /> <script src=&quot;path/to/foo.min.js&quot;></script></p> <p><!-- foo-one的代码块会在它被使用时自动加载 --><br /> <foo-one></foo-one>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"path/to/foo.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- foo-one的代码块会在它被使用时自动加载 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">foo-one</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">foo-one</span>&gt;</span></code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vue CLI 3 中文文档

全部内容,希望文章能够帮你解决

Vue CLI 3 中文文档

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过