Vue 3 多个组件打包为插件并在浏览器中使用的完整案例（多种方式）

最新推荐文章于 2024-06-11 11:41:30 发布

loyoi

最新推荐文章于 2024-06-11 11:41:30 发布

阅读量2.2k

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_54898878/article/details/129722941

版权

rollup方法

首先是我们的组件代码，我们将创建两个组件 HelloWorld 和 ByeWorld：

<!-- HelloWorld.vue -->

<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
};
</script>

<!-- ByeWorld.vue -->

<template>
  <div>
    <h1>Goodbye, {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
};
</script>

然后，我们需要将这些组件打包为一个插件。我们可以在插件中注册这些组件，并将插件导出以便在浏览器中使用：

// plugin.js

import HelloWorld from './HelloWorld.vue';
import ByeWorld from './ByeWorld.vue';

export { HelloWorld, ByeWorld };

export default {
  install(app) {
    app.component('HelloWorld', HelloWorld);
    app.component('ByeWorld', ByeWorld);
  }
};

接下来，我们需要使用 rollup.js 来将插件和组件打包到一个文件中：

// rollup.config.js

import vue from 'rollup-plugin-vue';
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/plugin.js',
  output: {
    name: 'MyPlugin', // 这里很重要，导出插件的名字
    exports: 'named',
    globals: {
      vue: 'Vue'
    }
  },
  external: ['vue'],
  plugins: [
    resolve(),
    vue(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**'
    })
  ]
};

在 rollup 配置文件中，我们使用了 rollup-plugin-vue 和 @rollup/plugin-babel 插件来转换代码，并使用 rollup-plugin-node-resolve 插件来解决 Vue 依赖项的路径问题。

最后，我们需要在 HTML 文件中引入 Vue 和我们的插件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue Plugin Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.22/dist/vue.global.js"></script>
    <script src="dist/my-plugin.js"></script>
  </head>
  <body>
    <div id="app">
      <HelloWorld name="World"></HelloWorld>
      <ByeWorld name="World"></ByeWorld>
    </div>

    <script>
      const app = Vue.createApp({});
      app.use(MyPlugin);
      app.mount('#app');
    </script>
  </body>
</html>

在上面的 HTML 文件中，我们首先引入 Vue.js 和我们的插件文件。然后，我们创建一个 Vue 实例，并在该实例上使用我们的插件。最后，我们将该实例挂载到 HTML 中的元素上。

webpack打包

首先，我们需要创建我们的 Vue 组件。在这个例子中，我们将创建两个组件，HelloWorld 和 ByeWorld，分别用于显示欢迎语和告别语：

<!-- HelloWorld.vue -->

<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
};
</script>

<!-- ByeWorld.vue -->

<template>
  <div>
    <h1>Goodbye, {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
};
</script>

接下来，我们需要创建一个入口文件，用于注册组件和导出我们的插件。我们将其命名为 index.js：

import HelloWorld from './HelloWorld.vue';
import ByeWorld from './ByeWorld.vue';

const MyPlugin = {
  install(app) {
    app.component('HelloWorld', HelloWorld);
    app.component('ByeWorld', ByeWorld);
  }
};

export { HelloWorld, ByeWorld };
export default MyPlugin;

在这个文件中，我们首先导入 HelloWorld 和 ByeWorld 组件。然后，我们创建了一个名为 MyPlugin 的插件对象，并在其 install 方法中注册了这两个组件。最后，我们导出了这两个组件和 MyPlugin 对象。

接下来，我们需要使用 webpack 将这些文件打包到一个文件中。我们需要安装 vue-loader 和 vue-template-compiler 来处理 Vue 组件：

npm install --save-dev vue-loader vue-template-compiler

然后，我们需要创建一个 webpack 配置文件。我们将其命名为 webpack.config.js：

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'my-plugin.js',
    library: 'MyPlugin',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue']
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

在这个配置文件中，我们首先设置了入口文件和输出文件的路径和名称。我们将 library 设置为 'MyPlugin'，这样就可以在浏览器中使用 MyPlugin 全局变量来访问我们的插件。libraryTarget 设置为 'umd'，这样我们的插件就可以在 Node.js 和浏览器环境中使用。使用 umdNamedDefine 设置为 true，可以为 AMD 模块提供命名。我们将文件打包到 dist 目录中。

接下来，我们设置了module.rules 选项来处理 Vue 组件和 JavaScript 文件。我们使用 vue-loader 来处理 Vue 组件，并使用 babel-loader 来处理 JavaScript 文件。需要注意的是，我们需要将 vue-loader 的选项设置为 { compilerOptions: { preserveWhitespace: false } }，这样可以保留组件中的空格和换行符。

我们还设置了 resolve.extensions 选项，使我们可以在导入组件时省略 .js 和 .vue 后缀。

最后，我们使用了 VueLoaderPlugin 插件，以便正确加载和解析 Vue 组件。

现在我们可以运行 webpack 命令来打包我们的插件：

npx webpack --mode production

完成后，我们将在 dist 目录中得到一个名为 my-plugin.js 的文件。

现在，我们可以在浏览器中使用我们的插件了。我们需要创建一个 HTML 文件来加载我们的插件。我们将其命名为 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Plugin Example</title>
</head>
<body>
  <div id="app">
    <hello-world name="Alice"></hello-world>
    <bye-world name="Bob"></bye-world>
  </div>

  <script src="./dist/my-plugin.js"></script>
  <script>
    Vue.use(MyPlugin);

    new Vue({
      el: '#app'
    });
  </script>
</body>
</html>

在这个文件中，我们首先加载了我们的插件文件。然后，我们使用 Vue.use(MyPlugin) 方法来安装我们的插件。最后，我们创建了一个 Vue 实例，并将其挂载到 id 为 app 的 div 元素上。

现在我们可以在浏览器中打开 index.html 文件，就可以看到我们的组件成功渲染了。

希望这个例子可以帮助你理解如何使用 webpack 将 Vue 3 多个组件打包为插件，并在浏览器中使用。另外，如果你想要发布你的 Vue 插件，可以考虑使用 npm。首先，我们需要创建一个 package.json 文件：

{
  "name": "my-plugin",
  "version": "1.0.0",
  "description": "A Vue plugin for my components",
  "main": "dist/my-plugin.js",
  "keywords": [
    "vue",
    "plugin",
    "components"
  ],
  "author": "Your Name <yourname@example.com>",
  "license": "MIT",
  "dependencies": {
    "vue": "^3.0.0"
  },
  "peerDependencies": {
    "vue": "^3.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/your-username/my-plugin.git"
  },
  "bugs": {
    "url": "https://github.com/your-username/my-plugin/issues"
  }
}

在 package.json 文件中，我们定义了我们的插件的名称、版本号、描述、依赖、作者等信息。需要注意的是，我们将我们的插件的入口文件设置为 dist/my-plugin.js。我们还指定了我们的插件依赖于 Vue 3，并将其设置为 peerDependencies。

接下来，我们可以运行 npm publish 命令来发布我们的插件：

npm publish

注意，发布插件前需要确保你已经登录到了 npm 账户。

现在，其他人可以使用 npm install 命令来安装你的插件，然后在他们的 Vue 应用程序中使用它了：

npm install my-plugin

import { HelloWorld, ByeWorld } from 'my-plugin';

createApp({
  components: {
    HelloWorld,
    ByeWorld
  }
}).mount('#app');

希望这个例子可以帮助你理解如何将 Vue 3 多个组件打包为插件，并将其发布到 npm。当然，在实际的开发过程中，我们可能还需要考虑一些其他的情况。例如，如何处理 CSS 样式、如何编写测试用例、如何处理版本号等。这些都是非常重要的问题，需要我们认真思考和解决。

最后，总结一下，将 Vue 3 多个组件打包为插件并在浏览器中使用的步骤如下：

创建一个 Vue 3 项目，并编写多个组件。

使用 webpack 配置文件将多个组件打包为插件。

创建一个 HTML 文件来加载插件，并在其中安装插件并使用组件。

如果需要发布插件，可以创建一个 package.json 文件并使用 npm 发布插件。

以上是一个基本的流程，希望对你有所帮助。

loyoi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue 3 多个组件打包为插件并在浏览器中使用的完整案例（多种方式）

需要注意的是，我们需要将 vue-loader 的选项设置为 { compilerOptions: { preserveWhitespace: false } }，这样可以保留组件中的空格和换行符。在 rollup 配置文件中，我们使用了 rollup-plugin-vue 和 @rollup/plugin-babel 插件来转换代码，并使用 rollup-plugin-node-resolve 插件来解决 Vue 依赖项的路径问题。然后，我们创建一个 Vue 实例，并在该实例上使用我们的插件。
复制链接

扫一扫