{{ card }}
+ + + diff --git a/tests/integration/vue/src/base.less b/tests/integration/vue/src/base.less new file mode 100644 index 000000000..13a9a154f --- /dev/null +++ b/tests/integration/vue/src/base.less @@ -0,0 +1 @@ +@theme-color: #428bca; diff --git a/tests/integration/vue/src/index.ts b/tests/integration/vue/src/index.ts new file mode 100644 index 000000000..663ef9530 --- /dev/null +++ b/tests/integration/vue/src/index.ts @@ -0,0 +1,2 @@ +export { default as Button } from './Button/index'; +export { default as Card } from './Card.vue'; diff --git a/website/docs/en/config/rsbuild/plugins.mdx b/website/docs/en/config/rsbuild/plugins.mdx index 860ec58ee..1197d01ff 100644 --- a/website/docs/en/config/rsbuild/plugins.mdx +++ b/website/docs/en/config/rsbuild/plugins.mdx @@ -39,7 +39,8 @@ Plugins available for React: Plugins available for Vue: -- [Vue Plugin](https://rsbuild.dev/plugins/list/plugin-vue): Provides support for Vue 3 SFC (Single File Components). +- [Vue Plugin](https://github.com/rspack-contrib/rsbuild-plugin-unplugin-vue): Based on [unplugin-vue](https://github.com/unplugin/unplugin-vue), provides support for Vue 3 SFC (Single File Components). +- [Vue Plugin](https://rsbuild.dev/plugins/list/plugin-vue): Based on [vue-loader](https://github.com/vuejs/vue-loader), provides support for Vue 3 SFC (Single File Components) (Recommend using the implementation based on [unplugin-vue](https://github.com/unplugin/unplugin-vue), as vue-loader is no longer maintained). - [Vue JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx): Provides support for Vue 3 JSX / TSX syntax. - [Vue2 Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2): Provides support for Vue 2 SFC (Single File Components). - [Vue2 JSX Plugin](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx): Provides support for Vue 2 JSX / TSX syntax. diff --git a/website/docs/en/guide/advanced/storybook.mdx b/website/docs/en/guide/advanced/storybook.mdx index aeecb39f4..738727043 100644 --- a/website/docs/en/guide/advanced/storybook.mdx +++ b/website/docs/en/guide/advanced/storybook.mdx @@ -100,3 +100,4 @@ Check out more details in the [Storybook Rsbuild documentation](https://storyboo ## Example - [React component library + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component) +- [Vue component library + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-vue3-component) diff --git a/website/docs/en/guide/solution/_meta.json b/website/docs/en/guide/solution/_meta.json index d81e0c779..bf48fec55 100644 --- a/website/docs/en/guide/solution/_meta.json +++ b/website/docs/en/guide/solution/_meta.json @@ -1 +1 @@ -["nodejs", "react"] +["nodejs", "react", "vue"] diff --git a/website/docs/en/guide/solution/react.mdx b/website/docs/en/guide/solution/react.mdx index 93b71a99c..ba8130be5 100644 --- a/website/docs/en/guide/solution/react.mdx +++ b/website/docs/en/guide/solution/react.mdx @@ -1,6 +1,6 @@ # React -In this document, you will learn how to build a React component library with Rslib. +In this document, you will learn how to build a React component library with Rslib. You can check out React related demo projects in the [examples](https://github.com/web-infra-dev/rslib/tree/main/examples). ## Create React project diff --git a/website/docs/en/guide/solution/vue.mdx b/website/docs/en/guide/solution/vue.mdx new file mode 100644 index 000000000..ff1f09fe2 --- /dev/null +++ b/website/docs/en/guide/solution/vue.mdx @@ -0,0 +1,45 @@ +# Vue + +In this document, you will learn how to build a Vue component library using Rslib. You can check out Vue related demo projects in the [examples](https://github.com/web-infra-dev/rslib/tree/main/examples). + +::: note + +1. Only Vue 3 is supported, Vue 2 is not supported. + +2. Vue's d.ts files are generated by [vue-tsc](https://www.npmjs.com/package/vue-tsc), so [lib.dts](/config/lib/dts) / [lib.redirect.dts](/config/lib/redirect#redirectdts) / [lib.banner.dts](/config/lib/banner#bannerdts) / [lib.footer.dts](/config/lib/footer#bannerdts) are not effective in Vue projects. + +::: + +{/* TODO: https://github.com/web-infra-dev/rslib/pull/960 */} + +{/* Then, when prompted with "Select template", choose `Vue`. */} + +## Using in existing Rslib project + +For developing Vue components, you need to set the [target](/config/rsbuild/output#outputtarget) to `"web"` in `rslib.config.ts`. This is crucial because Rslib sets `target` to `"node"` by default, which is different from Rsbuild's default target value. + +To compile Vue (.vue single-file components), you need to register the [rsbuild-plugin-unplugin-vue](https://github.com/rspack-contrib/rsbuild-plugin-unplugin-vue) plugin based on [unplugin-vue](https://github.com/unplugin/unplugin-vue). This plugin will automatically add the necessary configurations for Vue build. + +For example, register in `rslib.config.ts`: + +```ts title="rslib.config.ts" +import { defineConfig } from '@rslib/core'; +import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue'; // [!code highlight] + +export default defineConfig({ + lib: [ + // ... + ], + // [!code highlight:4] + output: { + target: 'web', + }, + plugins: [pluginUnpluginVue(/** options here */)], +}); +``` + +::: note +Currently, the [rsbuild-plugin-unplugin-vue](https://github.com/rspack-contrib/rsbuild-plugin-unplugin-vue) plugin does not support packaging Vue SFC [scoped CSS](https://vuejs.org/api/sfc-css-features#scoped-css) styles. You can choose styling solutions like Less or Sass. +::: + +For more configuration options, please refer to the [rsbuild-plugin-unplugin-vue](https://github.com/rspack-contrib/rsbuild-plugin-unplugin-vue) plugin documentation. diff --git a/website/docs/zh/config/rsbuild/plugins.mdx b/website/docs/zh/config/rsbuild/plugins.mdx index 644e95a7f..b5a2422be 100644 --- a/website/docs/zh/config/rsbuild/plugins.mdx +++ b/website/docs/zh/config/rsbuild/plugins.mdx @@ -39,7 +39,8 @@ export default defineConfig({ 适用于 Vue 的插件有: -- [Vue 插件](https://rsbuild.dev/zh/plugins/list/plugin-vue):提供对 Vue 3 SFC(单文件组件)的支持。 +- [Vue 插件](https://github.com/rspack-contrib/rsbuild-plugin-unplugin-vue):基于 [unplugin-vue](https://github.com/unplugin/unplugin-vue) 实现的为 Vue 3 SFC(单文件组件)提供支持的插件。 +- [Vue 插件](https://rsbuild.dev/zh/plugins/list/plugin-vue):基于 [vue-loader](https://github.com/vuejs/vue-loader) 实现的为 Vue 3 SFC(单文件组件)提供支持的插件(推荐使用基于 [unplugin-vue](https://github.com/unplugin/unplugin-vue) 的实现,vue-loader 已不再维护)。 - [Vue JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue-jsx):提供对 Vue 3 JSX / TSX 语法的支持。 - [Vue 2 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2):提供对 Vue 2 SFC(单文件组件)的支持。 - [Vue 2 JSX 插件](https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx):提供对 Vue 2 JSX / TSX 语法的支持。 diff --git a/website/docs/zh/guide/advanced/storybook.mdx b/website/docs/zh/guide/advanced/storybook.mdx index beee55b1b..ce67261ff 100644 --- a/website/docs/zh/guide/advanced/storybook.mdx +++ b/website/docs/zh/guide/advanced/storybook.mdx @@ -100,3 +100,4 @@ npx storybook build // 构建静态文件 ## 示例 - [React 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/rslib-react-component) +- [Vue 组件库 + Rslib + Storybook](https://github.com/rspack-contrib/storybook-rsbuild/tree/main/sandboxes/vue3) diff --git a/website/docs/zh/guide/solution/_meta.json b/website/docs/zh/guide/solution/_meta.json index d81e0c779..bf48fec55 100644 --- a/website/docs/zh/guide/solution/_meta.json +++ b/website/docs/zh/guide/solution/_meta.json @@ -1 +1 @@ -["nodejs", "react"] +["nodejs", "react", "vue"] diff --git a/website/docs/zh/guide/solution/react.mdx b/website/docs/zh/guide/solution/react.mdx index 310ea6a71..6a6de9571 100644 --- a/website/docs/zh/guide/solution/react.mdx +++ b/website/docs/zh/guide/solution/react.mdx @@ -1,6 +1,6 @@ # React -在本文档中,你将学习如何使用 Rslib 构建 React 组件库。 +在本文档中,你将学习如何使用 Rslib 构建 React 组件库,你可在 [示例](https://github.com/web-infra-dev/rslib/tree/main/examples) 中查看 React 相关演示项目。 ## 创建 React 项目 diff --git a/website/docs/zh/guide/solution/vue.mdx b/website/docs/zh/guide/solution/vue.mdx new file mode 100644 index 000000000..6e64f5d89 --- /dev/null +++ b/website/docs/zh/guide/solution/vue.mdx @@ -0,0 +1,45 @@ +# Vue + +在本文档中,你将学习如何使用 Rslib 构建 Vue 组件库。你可在 [示例](https://github.com/web-infra-dev/rslib/tree/main/examples) 中查看 Vue 相关演示项目。 + +::: note + +1. 仅支持 Vue3 版本,Vue2 版本不支持。 + +2. Vue 的 d.ts 文件由 [vue-tsc](https://www.npmjs.com/package/vue-tsc) 生成,所以 [lib.dts](/config/lib/dts) / [lib.redirect.dts](/config/lib/redirect#redirectdts) / [lib.banner.dts](/config/lib/banner#bannerdts) / [lib.footer.dts](/config/lib/footer#bannerdts) 在 Vue 项目中不生效。 + +::: + +{/* TODO: https://github.com/web-infra-dev/rslib/pull/960 */} + +{/* 然后,当提示 "Select template" 选择 `Vue`。 */} + +## 在现有 Rslib 项目中使用 + +开发 Vue 组件,需要在 `rslib.config.ts` 中设置 [target](/config/rsbuild/output#outputtarget) 为 `"web"`。 这一点至关重要,因为 Rslib 默认将 `target` 设置为 `"node"`,这与 Rsbuild 的 target 默认值不同。 + +要编译 Vue(.vue 单文件组件),你需要注册基于 [unplugin-vue](https://github.com/unplugin/unplugin-vue) 实现的 [rsbuild-plugin-unplugin-vue](https://github.com/rspack-contrib/rsbuild-plugin-unplugin-vue) 插件。该插件将自动添加 Vue 构建所需的配置。 + +例如,在 `rslib.config.ts` 中注册: + +```ts title="rslib.config.ts" +import { defineConfig } from '@rslib/core'; +import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue'; // [!code highlight] + +export default defineConfig({ + lib: [ + // ... + ], + // [!code highlight:4] + output: { + target: 'web', + }, + plugins: [pluginUnpluginVue(/** options here */)], +}); +``` + +::: note +目前 [rsbuild-plugin-unplugin-vue](https://github.com/rspack-contrib/rsbuild-plugin-unplugin-vue) 插件还不支持打包 Vue SFC [scoped CSS](https://vuejs.org/api/sfc-css-features#scoped-css) 样式,你可以选择 Less、Sass 等样式解决方案 +::: + +更多配置可以参考 [rsbuild-plugin-unplugin-vue](https://github.com/rspack-contrib/rsbuild-plugin-unplugin-vue) 插件文档。