close
Rslib
  • 简体中文

      • Vue

      在本文档中，你将学习如何使用 Rslib 构建 Vue 组件库，你可在 示例 中查看 Vue 相关演示项目。

      Note

      1. 仅支持 Vue3 版本，Vue2 版本不支持。

      2. Vue 的类型声明文件由 vue-tsc 生成，所以 lib.dts / lib.redirect.dts / lib.banner.dts / lib.footer.dts 在 Vue 项目中不生效。

      创建 Vue 项目

      你可以使用 create-rslib 创建 Rslib + Vue 项目。只需执行以下命令：

      npm
      yarn
      pnpm
      bun
      npm create rslib@latest

      然后，当提示 "Select template" 选择 Vue。

      在现有 Rslib 项目中使用

      开发 Vue 组件，需要在 rslib.config.ts 中设置 target 为 "web"。 这一点至关重要，因为 Rslib 默认将 target 设置为 "node"，这与 Rsbuild 的 target 默认值不同。

      要编译 Vue（.vue 单文件组件），你需要注册 @rsbuild/plugin-vue 插件。该插件将自动添加 Vue 构建所需的配置。

      例如，在 rslib.config.ts 中注册:

      rslib.config.ts
      import { defineConfig } from '@rslib/core';
import { pluginVue } from '@rsbuild/plugin-vue'; 

export default defineConfig({
  lib: [
    // ...
  ],
  output: {
    target: 'web',
  },
  plugins: [pluginVue(/** options here */)],
});

      更多配置可以参考 @rsbuild/plugin-vue 插件文档。