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

Question

我使用 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({...})

为了清楚起见，我对appnpm 构建生成的 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。

标签： javascriptvue.jsvuetify.js

Answer 1

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

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

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

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

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

   npx @vue/cli add vuetify
   

3. 编辑项目的buildNPM 脚本package.json以创建一个名为的库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对象，其中包含一个install仅指定感兴趣的 Vuetify 组件的函数：

   // 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并初始化 Vue 应用程序的vuetify块MyVuetify.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 演示