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

docs: add vite plugin guide (#8246)

Browse Source
This commit is contained in:
neverland 2021-03-02 09:49:26 +08:00 committed by GitHub
parent 29890efedb
commit 2fd0d54da1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
docs/markdown/quickstart.en-US.md
View File

@ -74,37 +74,54 @@ Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to
npm i babel-plugin-import -D
```
```js
// set babel config in .babelrc or babel-loader
Set babel config in .babelrc or babel-loader:
```json
// Note: Don't set libraryDirectory if you are using webpack 1.
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}
// For users who use babel7, that can be configured in babel.config.js
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
```
```js
// Then you can import components from vant
// For users who use babel7, that can be configured in babel.config.js
module.exports = {
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true,
},
'vant',
],
],
};
```
Then you can import components from vant:
```js
import { Button } from 'vant';
```
> If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
#### Vite Plugin
If you are using Vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) or [vite-plugin-imp](https://github.com/onebay/vite-plugin-imp) instead.
#### TypeScript Plugin
If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
### 2. Manually import

63
docs/markdown/quickstart.zh-CN.md
View File

@ -95,38 +95,55 @@ vue ui
npm i babel-plugin-import -D
```
```js
// 在.babelrc 中添加配置
在.babelrc 中添加配置：
```json
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
```
```js
// 接着你可以在代码中直接引入 Vant 组件
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true,
},
'vant',
],
],
};
```
接着你可以在代码中直接引入 Vant 组件：
```js
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
```
> Tips: 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
#### Vite 插件
对于 vite 项目，可以使用 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 或 [vite-plugin-imp](https://github.com/onebay/vite-plugin-imp) 实现按需引入。
#### TypeScript 插件
如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
### 方式二. 手动按需引入组件
@ -154,12 +171,6 @@ app.use(Vant);
## 常见问题
### 在 Vite 中如何按需引入组件？
在 Vite 中无须考虑按需引入的问题。Vite 在构建代码时，会自动通过 Tree Shaking 移除未使用的 ESM 模块。而 Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力。
现阶段遗留的问题是，未使用的组件样式无法被 Tree Shaking 识别并移除，后续我们会考虑通过 Vite 插件的方式进行支持。
### 在 HTML 中无法正确渲染组件？
在 HTML 中使用 Vant 组件时，你可能会碰到部分示例代码无法正确渲染的情况，比如下面的用法：