Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add Rsbuild import on demand guide #12629

Merged
merged 1 commit into from
Feb 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading