如何使用webpack从npm生成的文件中注册Vue插件

Question

我使用Vue CLI和Vuetify设置了一个带有基本脚手架的新Vue项目，并使用树摇动来消除我不需要的任何组件。我真的只对包含Vuetify组件的供应商文件感兴趣(可能是dist/js和dist/css下的chunk vender…文件(。

我的项目中的HTML包括那些供应商文件，但我不知道如何用Vue注册插件。例如，在我的应用程序的JS文件中：

Vue.use(vuetify); // where do I get the vuetify plugin object from?
new Vue({...})

需要明确的是，我对npm构建生成的appJS/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。

Answer 1

实际上有一种更惯用的方法可以使用Vue CLI创建库。buildNPM脚本应指定库构建类型和导出Vue插件(例如src/plugins/vuetify.js(的入口点，其中仅安装特定的Vuetify组件。

例如，要创建一个只安装VApp(在Vuetify 2.x中需要作为根组件(、VContainer、VBtn和VTextField组件的Vue插件：

1. 运行以下命令以使用默认选项生成Vue CLI项目：

   npx @vue/cli create --default my-vuetify
   cd my-vuetify
   

2. 从项目的根目录运行此命令，将Vuetify添加到项目中(并在提示下选择默认预设(：

   npx @vue/cli add vuetify
   

3. 在package.json中编辑项目的buildNPM脚本，以创建一个名为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",
   }
   }
   

4. 在插件的入口文件中，导出一个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
   })
   }
   }
   

5. 运行此命令以构建库：

   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>

GitHub演示