Skip to content

Commit ca5b6d5

Browse files
authored
docs: create Vue project (#1021)
1 parent 8774f53 commit ca5b6d5

File tree

2 files changed

+33
-7
lines changed

2 files changed

+33
-7
lines changed

website/docs/en/guide/solution/vue.mdx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,28 @@ In this document, you will learn how to build a Vue component library using Rsli
66

77
1. Only Vue 3 is supported, Vue 2 is not supported.
88

9-
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.
9+
2. Vue's declaration 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.
1010

1111
:::
1212

13-
{/* TODO: https://github.com/web-infra-dev/rslib/pull/960 */}
13+
## Create Vue project
1414

15-
{/* Then, when prompted with "Select template", choose `Vue`. */}
15+
You can use `create-rslib` to create a project with Rslib + Vue. Just execute the following command:
1616

17-
## Using in existing Rslib project
17+
import { PackageManagerTabs } from '@theme';
18+
19+
<PackageManagerTabs
20+
command={{
21+
npm: 'npm create rslib@latest',
22+
yarn: 'yarn create rslib',
23+
pnpm: 'pnpm create rslib@latest',
24+
bun: 'bun create rslib@latest',
25+
}}
26+
/>
27+
28+
Then select `Vue` when prompted to "Select template".
29+
30+
## Use Rslib in an existing project
1831

1932
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.
2033

website/docs/zh/guide/solution/vue.mdx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,26 @@
66

77
1. 仅支持 Vue3 版本,Vue2 版本不支持。
88

9-
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 项目中不生效。
9+
2. Vue 的类型声明文件由 [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 项目中不生效。
1010

1111
:::
1212

13-
{/* TODO: https://github.com/web-infra-dev/rslib/pull/960 */}
13+
## 创建 Vue 项目
1414

15-
{/* 然后,当提示 "Select template" 选择 `Vue`。 */}
15+
你可以使用 `create-rslib` 创建 Rslib + Vue 项目。只需执行以下命令:
16+
17+
import { PackageManagerTabs } from '@theme';
18+
19+
<PackageManagerTabs
20+
command={{
21+
npm: 'npm create rslib@latest',
22+
yarn: 'yarn create rslib',
23+
pnpm: 'pnpm create rslib@latest',
24+
bun: 'bun create rslib@latest',
25+
}}
26+
/>
27+
28+
然后,当提示 "Select template" 选择 `Vue`
1629

1730
## 在现有 Rslib 项目中使用
1831

0 commit comments

Comments
 (0)