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>