Skip to content

Commit

Permalink
docs: add Rsbuild import on demand guide (#12629)
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan authored Feb 14, 2024
1 parent 3fcd1b9 commit 41bbe5b
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 16 deletions.
42 changes: 34 additions & 8 deletions packages/vant/docs/markdown/quickstart.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ app.use(Button);
### Import on demand

If you are using `vite`, `webpack` or `vue-cli`, you can use [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components), this plugin can help you to auto importing components.
If you are using Rsbuild, Vite, webpack or vue-cli, you can use [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components), this plugin can help you to auto importing components.

Vant officially wrote an automatic import style parser [@vant/auto-import-resolver](https://github.com/youzan/vant/tree/main/packages/vant-auto-import-resolver) based on `unplugin-vue-components`, both of which are used together.

Expand All @@ -145,7 +145,29 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D

#### 2. Configure Plugin

For `vite` based project,configure the plugin in the `vite.config.js` file:
For Rsbuild based project,configure the plugin in the `rsbuild.config.js` file:

```js
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
plugins: [pluginVue()],
tools: {
rspack: {
plugins: [
Components({
resolvers: [VantResolver()],
}),
],
},
},
});
```

For Vite based project,configure the plugin in the `vite.config.js` file:

```js
import vue from '@vitejs/plugin-vue';
Expand All @@ -162,7 +184,7 @@ export default {
};
```

For `vue-cli` based project,configure the plugin in the `vue.config.js` file:
For vue-cli based project,configure the plugin in the `vue.config.js` file:

```js
const { VantResolver } = require('@vant/auto-import-resolver');
Expand All @@ -171,23 +193,27 @@ const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
configureWebpack: {
plugins: [
ComponentsPlugin({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is less than 0.26.0
ComponentsPlugin.default({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0
// When the version of unplugin-vue-components is less than 0.26.0:
ComponentsPlugin({ resolvers: [VantResolver()] }),
// when the unplugin-vue-components version is greater than or equal to 0.26.0:
ComponentsPlugin.default({ resolvers: [VantResolver()] }),
],
},
};
```

For `webpack` based project,configure the plugin in the `webpack.config.js` file:
For webpack based project,configure the plugin in the `webpack.config.js` file:

```js
const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
plugins: [
ComponentsPlugin({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is less than 0.26.0
ComponentsPlugin.default({ resolvers: [VantResolver()] }), // when the unplugin-vue-components version is greater than or equal to 0.26.0
// When the version of unplugin-vue-components is less than 0.26.0:
ComponentsPlugin({ resolvers: [VantResolver()] }),
// when the unplugin-vue-components version is greater than or equal to 0.26.0:
ComponentsPlugin.default({ resolvers: [VantResolver()] }),
],
};
```
Expand Down
42 changes: 34 additions & 8 deletions packages/vant/docs/markdown/quickstart.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ Vant 支持多种组件注册方式,除了在 app 上全局注册组件,你
### 方法二. 按需引入组件样式

在基于 `vite``webpack``vue-cli` 的项目中使用 Vant 时,可以使用 [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) 插件,它可以自动引入组件。
在基于 Rsbuild、Vite、webpack 或 vue-cli 的项目中使用 Vant 时,可以使用 [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) 插件,它可以自动引入组件。

Vant 官方基于 `unplugin-vue-components` 提供了自动导入样式的解析器 [@vant/auto-import-resolver](https://github.com/youzan/vant/tree/main/packages/vant-auto-import-resolver),两者可以配合使用。

Expand All @@ -167,7 +167,29 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D

#### 2. 配置插件

如果是基于 `vite` 的项目,在 `vite.config.js` 文件中配置插件:
如果是基于 [Rsbuild](https://github.com/web-infra-dev/rsbuild) 的项目,在 `rsbuild.config.js` 文件中配置插件:

```js
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
plugins: [pluginVue()],
tools: {
rspack: {
plugins: [
Components({
resolvers: [VantResolver()],
}),
],
},
},
});
```

如果是基于 Vite 的项目,在 `vite.config.js` 文件中配置插件:

```js
import vue from '@vitejs/plugin-vue';
Expand All @@ -184,7 +206,7 @@ export default {
};
```

如果是基于 `vue-cli` 的项目,在 `vue.config.js` 文件中配置插件:
如果是基于 vue-cli 的项目,在 `vue.config.js` 文件中配置插件:

```js
const { VantResolver } = require('@vant/auto-import-resolver');
Expand All @@ -193,23 +215,27 @@ const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
configureWebpack: {
plugins: [
ComponentsPlugin({ resolvers: [VantResolver()] }), // 当 unplugin-vue-components 版本小于 0.26.0
ComponentsPlugin.default({ resolvers: [VantResolver()] }), //当 unplugin-vue-components 版本大于等于 0.26.0
// 当 unplugin-vue-components 版本小于 0.26.0 时,使用以下写法
ComponentsPlugin({ resolvers: [VantResolver()] }),
//当 unplugin-vue-components 版本大于等于 0.26.0 时,使用以下写法
ComponentsPlugin.default({ resolvers: [VantResolver()] }),
],
},
};
```

如果是基于 `webpack` 的项目,在 `webpack.config.js` 文件中配置插件:
如果是基于 webpack 的项目,在 `webpack.config.js` 文件中配置插件:

```js
const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
plugins: [
ComponentsPlugin({ resolvers: [VantResolver()] }), // 当 unplugin-vue-components 版本小于 0.26.0
ComponentsPlugin.default({ resolvers: [VantResolver()] }), //当 unplugin-vue-components 版本大于等于 0.26.0
// 当 unplugin-vue-components 版本小于 0.26.0 时,使用以下写法
ComponentsPlugin({ resolvers: [VantResolver()] }),
//当 unplugin-vue-components 版本大于等于 0.26.0 时,使用以下写法
ComponentsPlugin.default({ resolvers: [VantResolver()] }),
],
};
```
Expand Down

0 comments on commit 41bbe5b

Please sign in to comment.