[英]How to exclude files in production build in the webpack config of my vue application
[英]How to register Vue plugin from files generated by npm build with webpack
我使用 Vue CLI 和 Vuetify 設置了一個帶有基本腳手架的新 Vue 項目,並使用 tree shaking 來消除任何我不需要的組件。 我真的只對具有 Vuetify 組件的供應商文件感興趣(大概是 dist/js 和 dist/css 下的塊供應商...文件)。
我的項目中的 HTML 包含那些供應商文件,但我不明白如何使用 Vue 注冊插件。 例如,在我的應用程序的 JS 文件中:
Vue.use(vuetify); // where do I get the vuetify plugin object from?
new Vue({...})
為了清楚起見,我對 npm 構建生成的app
JS/CSS 文件不感興趣。 我只使用整個設置,以便我可以手動挑選我想要的 Vuetify 組件並創建必要的 JS/CSS。
如果我在來自 CDN 的 HTML 中包含完整的 Vuetify 腳本/css,例如
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.17/vuetify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.17/vuetify.min.css" rel="stylesheet" type="text/css"/>
...然后我可以在我的應用程序 JS 中初始化 Vuetify,例如:
new Vue({
el: '#my-app',
vuetify: new Vuetify(),
})
...所以我希望找出是否有一種方法可以使用從 Vue CLI 構建生成的供應商 JS 文件而不是完整的 CDN 版本來初始化 Vuetify。 如果我在使用供應商構建 JS 文件時嘗試使用上述相同的初始化方法,則會收到錯誤Vuetify is not defined
。
實際上有一種更慣用的方式來使用 Vue CLI 創建庫。 您的build
NPM 腳本應指定庫構建類型和導出Vue 插件(例如src/plugins/vuetify.js
)的入口點,其中僅安裝特定的 Vuetify 組件。
例如,要創建一個僅安裝VApp
(在 Vuetify 2.x 中作為根組件需要)、 VContainer
、 VBtn
和VTextField
組件的 Vue 插件:
運行以下命令以使用默認選項生成 Vue CLI 項目:
npx @vue/cli create --default my-vuetify cd my-vuetify
從項目的根目錄運行此命令以將 Vuetify 添加到項目中(並在提示時選擇默認預設):
npx @vue/cli add vuetify
在package.json
中編輯項目的build
NPM-script 以創建一個名為MyVuetify
的庫(這將是在您的<script>
標簽中導入庫時設置的全局變量):
// package.json { "scripts": { // BEFORE: "build": "vue-cli-service build", // AFTER: "build": "vue-cli-service build --target lib --name MyVuetify src/plugins/vuetify.js", } }
在插件的入口文件中,導出一個構造新Vuetify
實例的vuetify
函數:
// src/plugins/vuetify.js import Vuetify from 'vuetify/lib' export const vuetify = options => new Vuetify({ ...options })
還導出一個plugin
對象,其中包含一個僅指定感興趣的 Vuetify 組件的install
函數:
// src/plugins/vuetify.js import { VApp, VContainer, VBtn, VTextField } from 'vuetify/lib' export const plugin = { install(app, options) { app.use(Vuetify, { components: { // Vuetify 2.x requires `VApp` to be the root component, so `VApp` // needs to be exported unless you prefer the consumer app provided it VApp, VContainer, VBtn, VTextField, }, ...options }) } }
運行以下命令來構建庫:
npm run build
在來自庫構建輸出的dist/demo.html
中,加載 UMD 腳本 ( MyVuetify.umd.js
),該腳本設置一個名為MyVuetify
的全局變量,其中包含來自構建輸出的導出(在前面的步驟 4 中定義)。 還加載樣式( MyVuetify.css
),其中包含所用 Vuetify 組件的 CSS。
<script src="./MyVuetify.umd.js"></script>
<link rel="stylesheet" href="./MyVuetify.css">
最后,創建一個<script>
塊,從MyVuetify.plugin
安裝插件並使用MyVuetify.vuetify()
初始化 Vue 應用程序的vuetify
:
<script>
Vue.use(MyVuetify.plugin)
new Vue({
vuetify: MyVuetify.vuetify(/* Vuetify options (e.g., `theme`) */),
})
</script>
這是一個完整的dist/demo.html
:
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="./MyVuetify.umd.js"></script>
<link rel="stylesheet" href="./MyVuetify.css">
<v-app id="app">
<v-container>
<form @submit.prevent="greet">
<v-text-field v-model="name" label="Name"></v-text-field>
<v-btn type="submit">Greet</v-btn>
</form>
</v-container>
</v-app>
<script>
Vue.use(MyVuetify.plugin)
new Vue({
el: '#app',
vuetify: MyVuetify.vuetify(),
data: () => ({
name: '',
}),
methods: {
greet() {
alert(`Hi ${this.name.trim() || 'there'}!`)
}
}
})
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.