小说阅读器,欢乐颂小说txt

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

創(chuàng)新互聯(lián)VueCLI教程：VueCLI構(gòu)建目標(biāo)

當(dāng)你運(yùn)行 Vue-cli-service build 時(shí)，你可以通過(guò) --target 選項(xiàng)指定不同的構(gòu)建目標(biāo)。它允許你將相同的源代碼根據(jù)不同的用例生成不同的構(gòu)建。

應(yīng)用

應(yīng)用模式是默認(rèn)的模式。在這個(gè)模式中：

index.html 會(huì)帶有注入的資源和 resource hint
第三方庫(kù)會(huì)被分到一個(gè)獨(dú)立包以便更好的緩存
小于 4kb 的靜態(tài)資源會(huì)被內(nèi)聯(lián)在 JavaScript 中
public 中的靜態(tài)資源會(huì)被復(fù)制到輸出目錄中

庫(kù)

關(guān)于 IE 兼容性的提醒

在庫(kù)模式中，項(xiàng)目的 publicPath 是根據(jù)主文件的加載路徑動(dòng)態(tài)設(shè)置的（用以支持動(dòng)態(tài)的資源加載能力）。但是這個(gè)功能用到了 document.currentScript，而 IE 瀏覽器并不支持這一特性。所以如果網(wǎng)站需要支持 IE 的話(huà)，建議使用庫(kù)之前先在頁(yè)面上引入 current-script-polyfill。

注意對(duì) Vue 的依賴(lài)

在庫(kù)模式中，Vue 是外置的。這意味著包中不會(huì)有 Vue，即便你在代碼中導(dǎo)入了 Vue。如果這個(gè)庫(kù)會(huì)通過(guò)一個(gè)打包器使用，它將嘗試通過(guò)打包器以依賴(lài)的方式加載 Vue；否則就會(huì)回退到一個(gè)全局的 Vue 變量。

要避免此行為，可以在build命令中添加--inline-vue標(biāo)志。

vue-cli-service build --target lib --inline-vue

你可以通過(guò)下面的命令將一個(gè)單獨(dú)的入口構(gòu)建為一個(gè)庫(kù)：

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

這個(gè)入口可以是一個(gè) .js 或一個(gè) .vue 文件。如果沒(méi)有指定入口，則會(huì)使用 src/App.vue。

構(gòu)建一個(gè)庫(kù)會(huì)輸出：

dist/myLib.common.js：一個(gè)給打包器用的 CommonJS 包 (不幸的是，webpack 目前還并沒(méi)有支持 ES modules 輸出格式的包)
dist/myLib.umd.js：一個(gè)直接給瀏覽器或 AMD loader 使用的 UMD 包
dist/myLib.umd.min.js：壓縮后的 UMD 構(gòu)建版本
dist/myLib.css：提取出來(lái)的 CSS 文件 (可以通過(guò)在 vue.config.js 中設(shè)置 css: { extract: false } 強(qiáng)制內(nèi)聯(lián))

警告

如果你在開(kāi)發(fā)一個(gè)庫(kù)或多項(xiàng)目倉(cāng)庫(kù) (monorepo)，請(qǐng)注意導(dǎo)入 CSS 是具有副作用的。請(qǐng)確保在 package.json 中移除 "sideEffects": false，否則 CSS 代碼塊會(huì)在生產(chǎn)環(huán)境構(gòu)建時(shí)被 webpack 丟掉。

Vue vs. JS/TS 入口文件

當(dāng)使用一個(gè) .vue 文件作為入口時(shí)，你的庫(kù)會(huì)直接暴露這個(gè) Vue 組件本身，因?yàn)榻M件始終是默認(rèn)導(dǎo)出的內(nèi)容。

然而，當(dāng)你使用一個(gè) .js 或 .ts 文件作為入口時(shí)，它可能會(huì)包含具名導(dǎo)出，所以庫(kù)會(huì)暴露為一個(gè)模塊。也就是說(shuō)你的庫(kù)必須在 UMD 構(gòu)建中通過(guò) window.yourLib.default 訪(fǎng)問(wèn)，或在 CommonJS 構(gòu)建中通過(guò) const myLib = require('mylib').default 訪(fǎng)問(wèn)。如果你沒(méi)有任何具名導(dǎo)出并希望直接暴露默認(rèn)導(dǎo)出，你可以在 vue.config.js 中使用以下 webpack 配置：

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default'
    }
  }
}

Web Components 組件

兼容性提示

Web Components 模式不支持 IE11 及更低版本。更多細(xì)節(jié)

注意對(duì) Vue 的依賴(lài)

在 Web Components 模式中，Vue 是外置的。這意味著包中不會(huì)有 Vue，即便你在代碼中導(dǎo)入了 Vue。這里的包會(huì)假設(shè)在頁(yè)面中已經(jīng)有一個(gè)可用的全局變量 Vue。

你可以通過(guò)下面的命令將一個(gè)單獨(dú)的入口構(gòu)建為一個(gè) Web Components 組件：

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

注意這里的入口應(yīng)該是一個(gè) *.vue 文件。Vue CLI 將會(huì)把這個(gè)組件自動(dòng)包裹并注冊(cè)為 Web Components 組件，無(wú)需在 main.js 里自行注冊(cè)。也可以在開(kāi)發(fā)時(shí)把 main.js 作為 demo app 單獨(dú)使用。

該構(gòu)建將會(huì)產(chǎn)生一個(gè)單獨(dú)的 JavaScript 文件 (及其壓縮后的版本) 將所有的東西都內(nèi)聯(lián)起來(lái)。當(dāng)這個(gè)腳本被引入網(wǎng)頁(yè)時(shí)，會(huì)注冊(cè)自定義組件，其使用 @vue/web-component-wrapper 包裹了目標(biāo)的 Vue 組件。這個(gè)包裹器會(huì)自動(dòng)代理屬性、特性、事件和插槽。請(qǐng)查閱 @vue/web-component-wrapper 的文檔了解更多細(xì)節(jié)。

注意這個(gè)包依賴(lài)了在頁(yè)面上全局可用的 Vue。

這個(gè)模式允許你的組件的使用者以一個(gè)普通 DOM 元素的方式使用這個(gè) Vue 組件：

注冊(cè)多個(gè) Web Components 組件的包

當(dāng)你構(gòu)建一個(gè) Web Components 組件包的時(shí)候，你也可以使用一個(gè) glob 表達(dá)式作為入口指定多個(gè)組件目標(biāo)：

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

當(dāng)你構(gòu)建多個(gè) web component 時(shí)，--name 將會(huì)用于設(shè)置前綴，同時(shí)自定義元素的名稱(chēng)會(huì)由組件的文件名推導(dǎo)得出。比如一個(gè)名為 HelloWorld.vue 的組件攜帶 --name foo 將會(huì)生成的自定義元素名為。

異步 Web Components 組件

當(dāng)指定多個(gè) Web Components 組件作為目標(biāo)時(shí)，這個(gè)包可能會(huì)變得非常大，并且用戶(hù)可能只想使用你的包中注冊(cè)的一部分組件。這時(shí)異步 Web Components 模式會(huì)生成一個(gè) code-split 的包，帶一個(gè)只提供所有組件共享的運(yùn)行時(shí)，并預(yù)先注冊(cè)所有的自定義組件小入口文件。一個(gè)組件真正的實(shí)現(xiàn)只會(huì)在頁(yè)面中用到自定義元素相應(yīng)的一個(gè)實(shí)例時(shí)按需獲取：

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

現(xiàn)在用戶(hù)在該頁(yè)面上只需要引入 Vue 和這個(gè)入口文件即可：

網(wǎng)站名稱(chēng)：創(chuàng)新互聯(lián)VueCLI教程：VueCLI構(gòu)建目標(biāo)
文章起源：http://m.fisionsoft.com.cn/article/dhjsiid.html