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

docs: recommend using unplugin-vue-components (#10703)

Browse Source
This commit is contained in:
neverland 2022-06-11 19:49:34 +08:00 committed by GitHub
parent 4dab4e20c2
commit a317984da1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,19 +94,19 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to
### Import on demand in vite projects (recommended)
If you are using vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import).
If you are using vite, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
#### 1. Install Plugin
```bash
# with npm
npm i vite-plugin-style-import@1.4.1 -D
npm i unplugin-vue-components -D
# with yarn
yarn add vite-plugin-style-import@1.4.1 -D
yarn add unplugin-vue-components -D
# with pnpm
pnpm add vite-plugin-style-import@1.4.1 -D
pnpm add unplugin-vue-components -D
```
#### 2. Configure Plugin
@ -115,13 +115,14 @@ Configure the plugin in the `vite.config.js` file:
```js
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
vue(),
styleImport({
resolves: [VantResolve()],
Components({
resolvers: [VantResolver()],
}),
],
};

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

@ -95,19 +95,19 @@ pnpm add vant
### 在 vite 项目中按需引入组件（推荐）
在 vite 项目中使用 Vant 时，推荐安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 插件，它可以自动按需引入组件的样式。
在 vite 项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。
#### 1. 安装插件
```bash
# 通过 npm 安装
npm i vite-plugin-style-import@1.4.1 -D
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add vite-plugin-style-import@1.4.1 -D
yarn add unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add vite-plugin-style-import@1.4.1 -D
pnpm add unplugin-vue-components -D
```
#### 2. 配置插件
@ -116,13 +116,14 @@ pnpm add vite-plugin-style-import@1.4.1 -D
```js
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
vue(),
styleImport({
resolves: [VantResolve()],
Components({
resolvers: [VantResolver()],
}),
],
};

39
packages/vant/docs/markdown/theme.en-US.md
View File

@ -174,42 +174,3 @@ module.exports = {
},
};
```
### Vite
Add the following config in `vite.config.js`.
```js
// vite.config.js
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default {
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
'text-color': '#111',
'border-color': '#eee',
},
},
},
},
resolve: {
alias: [{ find: /^~/, replacement: '' }],
},
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style/less`,
},
],
}),
],
};
```

41
packages/vant/docs/markdown/theme.zh-CN.md
View File

@ -182,44 +182,3 @@ module.exports = {
},
};
```
### Vite 项目
如果是 vite 项目，可以跳过以上步骤，直接在 `vite.config.js` 中添加如下配置即可。
```js
// vite.config.js
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default {
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
// 覆盖样式变量
modifyVars: {
'text-color': '#111',
'border-color': '#eee',
},
},
},
},
resolve: {
alias: [{ find: /^~/, replacement: '' }],
},
plugins: [
vue(),
// 按需引入样式源文件
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style/less`,
},
],
}),
],
};
```