blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: add Rsbuild import on demand guide (#12629)

Browse Source
This commit is contained in:
neverland 2024-02-14 10:33:29 +08:00 committed by GitHub
parent 3fcd1b95ce
commit 41bbe5b0f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 68 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/vant/docs/markdown/quickstart.en-US.md
View File

@ -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.
@ -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';
@ -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');
@ -171,14 +193,16 @@ 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');
@ -186,8 +210,10 @@ 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()] }),
],
};
```

42
packages/vant/docs/markdown/quickstart.zh-CN.md
View File

@ -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)，两者可以配合使用。
@ -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';
@ -184,7 +206,7 @@ export default {
};
```
如果是基于 `vue-cli` 的项目，在 `vue.config.js` 文件中配置插件：
如果是基于 vue-cli 的项目，在 `vue.config.js` 文件中配置插件：
```js
const { VantResolver } = require('@vant/auto-import-resolver');
@ -193,14 +215,16 @@ 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');
@ -208,8 +232,10 @@ 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()] }),
],
};
```