发布于 由admin

如何利用 Vue CLI 的自定义构建目标，构建一个可嵌入其他网页的 Vue 小部件（Widget）？

大家好，我是你们今天的 Vue.js 特约讲师，人称“代码界的段子手” (好吧，我自己封的)。 今天咱们要聊点有意思的，就是如何用 Vue CLI 打造一个“即插即用”的 Vue 小部件，让你的 Vue 组件像乐高积木一样，轻松嵌入到任何网页里。 咱们开始吧！

第一部分：为什么我们需要 Vue Widget？

先来想想，为什么要搞这个“小部件”？ 难道只是为了炫技？ 当然不是！

  • 代码复用性爆表： 假设你公司官网、产品页面、博客都需要展示一个用户评价组件，如果每次都复制粘贴代码，那简直是程序员的噩梦。 小部件可以让你一次开发，到处使用。
  • 解耦神器： 将特定功能封装成小部件，可以降低不同项目之间的耦合度。 比如一个天气预报小部件，完全可以独立开发和维护，不会影响其他业务逻辑。
  • 第三方集成利器： 如果你想把你的 Vue 组件分享给其他人使用，或者集成到别人的系统中，小部件是最佳选择。 比如一个在线客服小部件，可以方便地嵌入到任何网站。

第二部分：Vue CLI 的自定义构建目标（Target）

Vue CLI 提供了强大的自定义构建目标功能，允许我们针对不同的场景进行构建。 在我们的场景中，我们需要构建一个可以嵌入到其他网页的 JavaScript 文件。

2.1 初始化 Vue 项目

首先，用 Vue CLI 创建一个新项目：

vue create vue-widget-demo

选择你喜欢的配置，我这里选择默认配置。

2.2 修改 vue.config.js

接下来，在项目根目录下创建一个 vue.config.js 文件（如果已经存在就直接修改）。 这个文件是 Vue CLI 的配置文件，我们可以在这里自定义构建行为。

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      library: 'VueWidget', // 导出的库的名称
      libraryTarget: 'umd', // 导出库的类型，这里使用 umd
      filename: 'vue-widget.js', // 输出文件名
    },
    // 为了避免打包后的文件过大，可以将 Vue 作为外部依赖
    externals: {
      vue: 'Vue',
    },
  },
  chainWebpack: config => {
    // 删除 prefetch 插件，避免预加载
    config.plugins.delete('prefetch');
    // 删除 preload 插件，避免预加载
    config.plugins.delete('preload');
    // 设置 entry 入口
    config.entry('app').clear().add('./src/widget.js');
  },
};

代码解释：

  • configureWebpack.output：

    • library: 指定导出的库的名称，这里我们设置为 VueWidget。 这意味着在其他网页中，我们可以通过 window.VueWidget 来访问我们的 Vue 组件。
    • libraryTarget: 指定导出库的类型，这里我们设置为 umd (Universal Module Definition)。 umd 是一种兼容多种模块规范的格式，包括 CommonJS (Node.js)、AMD (RequireJS) 和全局变量。 这样我们的组件就可以在各种环境下使用。
    • filename: 指定输出的文件名，这里我们设置为 vue-widget.js。

  • configureWebpack.externals：

    • vue: 'Vue'： 这行代码告诉 Webpack，不要把 Vue 打包到我们的 vue-widget.js 文件中。 而是假设宿主网页已经引入了 Vue。 这样做的好处是减小文件体积，并且避免 Vue 版本冲突。

  • chainWebpack：

    • config.plugins.delete('prefetch') 和 config.plugins.delete('preload')： 移除预加载插件，这在小部件中通常是不需要的。
    • config.entry('app').clear().add('./src/widget.js')： 关键的一步！ 我们修改了 Webpack 的入口文件，不再使用默认的 src/main.js，而是使用我们自定义的 src/widget.js。

2.3 创建 src/widget.js

现在，我们需要创建 src/widget.js 文件，作为我们小部件的入口。

// src/widget.js
import Vue from 'vue';
import WidgetComponent from './components/WidgetComponent.vue';

// 创建一个 Vue 实例，但不要挂载到 DOM 上
const Widget = Vue.extend(WidgetComponent);

// 定义一个函数，用于在指定的 DOM 元素上挂载组件
function mountWidget(el, props = {}) {
  const widget = new Widget({
    propsData: props,
  });
  widget.$mount(el);
  return widget;
}

// 将 mountWidget 函数暴露出去，以便外部网页调用
export { mountWidget };

代码解释：

  • import Vue from 'vue'： 引入 Vue 库。
  • import WidgetComponent from './components/WidgetComponent.vue'： 引入我们的 Vue 组件。
  • Vue.extend(WidgetComponent)： 创建一个 Vue 构造器，而不是直接创建一个 Vue 实例。 这样做的好处是，我们可以根据需要创建多个组件实例，并将它们挂载到不同的 DOM 元素上。
  • mountWidget(el, props = {})： 这个函数是关键！ 它接收两个参数：
    • el: 要挂载组件的 DOM 元素。
    • props: 要传递给组件的 props 数据。
    • 函数内部，我们创建一个 Vue 实例，并将 props 数据传递给它。 然后，我们调用 $mount(el) 方法，将组件挂载到指定的 DOM 元素上。
  • export { mountWidget }： 将 mountWidget 函数导出，以便外部网页可以调用它。

2.4 创建 src/components/WidgetComponent.vue

接下来，我们需要创建一个 Vue 组件，作为我们小部件的内容。

// src/components/WidgetComponent.vue
<template>
  <div class="widget">
    <h1>Hello from Widget!</h1>
    <p>Message: {{ message }}</p>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'This is a default message.',
    },
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  mounted() {
    console.log('Widget component mounted!');
  },
};
</script>

<style scoped>
.widget {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
</style>

这是一个简单的 Vue 组件，包含一个标题、一段消息和一个计数器。

2.5 构建小部件

现在，我们可以运行 Vue CLI 的构建命令，生成我们的小部件文件：

npm run build

构建完成后，你会在 dist 目录下看到一个 vue-widget.js 文件。 这就是我们的小部件文件！

第三部分：在其他网页中使用 Vue Widget

现在，我们来模拟一个场景，将我们的 Vue 小部件嵌入到其他网页中。

3.1 创建一个 HTML 文件

创建一个名为 index.html 的文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Widget Demo</title>
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
  <!-- 引入我们的 Vue Widget -->
  <script src="./dist/vue-widget.js"></script>
</head>
<body>
  <h1>Embedding Vue Widget</h1>

  <!-- 创建一个 DOM 元素，用于挂载 Widget -->
  <div id="widget-container"></div>

  <script>
    // 在 DOM 加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 获取 Widget 容器
      const container = document.getElementById('widget-container');

      // 调用 mountWidget 函数，挂载 Widget
      VueWidget.mountWidget(container, { message: 'Hello from the outside!' });

      // 你可以创建多个 Widget 实例，并挂载到不同的容器中
      const anotherContainer = document.createElement('div');
      document.body.appendChild(anotherContainer);
      VueWidget.mountWidget(anotherContainer, { message: 'Another Widget!' });
    });
  </script>
</body>
</html>

代码解释：

  • <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>： 引入 Vue.js。 注意： 这里我们使用了 CDN 引入 Vue.js，因为我们在 vue.config.js 中配置了 externals，告诉 Webpack 不要把 Vue 打包到我们的 vue-widget.js 文件中。
  • <script src="./dist/vue-widget.js"></script>： 引入我们构建的 Vue Widget 文件。
  • <div id="widget-container"></div>： 创建一个 DOM 元素，用于挂载我们的 Vue Widget。
  • VueWidget.mountWidget(container, { message: 'Hello from the outside!' })： 调用 VueWidget.mountWidget 函数，将我们的 Vue Widget 挂载到 widget-container 元素上。 我们还传递了一个 message prop，用于自定义 Widget 的内容。

3.2 运行 HTML 文件

用浏览器打开 index.html 文件，你就可以看到嵌入的 Vue Widget 了！

你应该能看到两个 Widget 组件，第一个显示 "Hello from the outside!"，第二个显示 "Another Widget!"。 这说明我们的 Vue Widget 已经成功嵌入到其他网页中，并且可以接收外部传递的 props 数据。

第四部分：更高级的用法

这只是一个简单的例子，你可以根据自己的需求进行更高级的定制。

  • 自定义事件： 在 Vue Widget 中触发自定义事件，并在宿主网页中监听这些事件。
  • 双向数据绑定： 实现 Vue Widget 和宿主网页之间的数据同步。
  • 使用 Vuex： 在 Vue Widget 中使用 Vuex 进行状态管理。
  • CSS 隔离： 使用 Shadow DOM 或 CSS Modules 来隔离 Vue Widget 的 CSS 样式，避免样式冲突。
  • 异步加载： 可以使用动态 import() 语法来异步加载你的 Vue Widget， 提高网页的加载速度。 比如：
// 异步加载 Vue Widget
import('./dist/vue-widget.js')
  .then(module => {
    const container = document.getElementById('widget-container');
    module.mountWidget(container, { message: 'Loaded asynchronously!' });
  })
  .catch(error => {
    console.error('Failed to load Vue Widget:', error);
  });

第五部分：一些需要注意的地方

  • Vue 版本： 确保宿主网页中使用的 Vue 版本与 Vue Widget 中使用的 Vue 版本一致。 否则可能会出现兼容性问题。
  • CSS 冲突： 由于 Vue Widget 的 CSS 样式可能会与宿主网页的 CSS 样式冲突，因此建议使用 CSS 隔离技术 (如 Shadow DOM 或 CSS Modules)。
  • 性能优化： 如果你的 Vue Widget 非常复杂，可能会影响宿主网页的性能。 因此，需要进行性能优化，比如使用代码分割、懒加载等技术。

第六部分：总结

今天，我们学习了如何使用 Vue CLI 的自定义构建目标功能，构建一个可以嵌入到其他网页的 Vue 小部件。 通过这种方式，我们可以轻松地实现代码复用、解耦和第三方集成。 希望今天的课程对你有所帮助！ 记住，写代码就像讲段子，要有趣，也要有用！ 下课！

表格总结：关键步骤与代码示例

步骤 描述 代码示例
1. 初始化 Vue 项目 使用 Vue CLI 创建一个新的 Vue 项目。 vue create vue-widget-demo
2. 修改 vue.config.js 配置 Vue CLI 的构建行为，指定输出文件名、库名称、库类型，并将 Vue 设置为外部依赖。 javascript<br>// vue.config.js<br>module.exports = {<br> configureWebpack: {<br> output: {<br> library: 'VueWidget',<br> libraryTarget: 'umd',<br> filename: 'vue-widget.js',<br> },<br> externals: {<br> vue: 'Vue',<br> },<br> },<br> chainWebpack: config =&gt; {<br> config.entry('app').clear().add('./src/widget.js');<br> },<br>};<br>
3. 创建 src/widget.js 创建小部件的入口文件，定义 mountWidget 函数，用于在指定的 DOM 元素上挂载组件。 javascript<br>// src/widget.js<br>import Vue from 'vue';<br>import WidgetComponent from './components/WidgetComponent.vue';<br><br>const Widget = Vue.extend(WidgetComponent);<br><br>function mountWidget(el, props = {}) {<br> const widget = new Widget({<br> propsData: props,<br> });<br> widget.$mount(el);<br> return widget;<br>}<br><br>export { mountWidget };<br>
4. 创建 Widget 组件 创建 Vue 组件，作为小部件的内容。 参考上文 src/components/WidgetComponent.vue 的代码示例.
5. 构建小部件 运行 Vue CLI 的构建命令，生成小部件文件。 npm run build
6. 在 HTML 中使用 在 HTML 文件中引入 Vue.js 和小部件文件，调用 VueWidget.mountWidget 函数，将小部件挂载到指定的 DOM 元素上。 html<br>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br> &lt;title&gt;Vue Widget Demo&lt;/title&gt;<br> &lt;script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"&gt;&lt;/script&gt;<br> &lt;script src="./dist/vue-widget.js"&gt;&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br> &lt;h1&gt;Embedding Vue Widget&lt;/h1&gt;<br> &lt;div id="widget-container"&gt;&lt;/div&gt;<br> &lt;script&gt;<br> document.addEventListener('DOMContentLoaded', function() {<br> const container = document.getElementById('widget-container');<br> VueWidget.mountWidget(container, { message: 'Hello from the outside!' });<br> });<br> &lt;/script&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;<br>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注