#Vue

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

#创建 Vue 项目

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

npm create rslib@latest

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

#在现有 Rslib 项目中使用

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

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

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

import { defineConfig } from '@rslib/core';
import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue'; 

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

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