mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
docs: remove babel-plugin-import (#10704)
This commit is contained in:
neverland
GitHub
parent
a317984da1
commit
88d44cf4ea
@ -34,7 +34,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vant/cli": "^2.0.0",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
|
||||
@ -42,7 +42,7 @@ button
|
||||
└─ README.md # component doc
|
||||
```
|
||||
|
||||
When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively, and the styles can also be imported automatically through babel-plugin-import.
|
||||
When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively.
|
||||
|
||||
Theme customization can be achieved by importing style source files (less or scss) and modifying style variables.
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ button
|
||||
└─ README.md # 组件文档
|
||||
```
|
||||
|
||||
采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。
|
||||
采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件。
|
||||
|
||||
通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。
|
||||
|
||||
|
||||
@ -92,9 +92,9 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to
|
||||
|
||||
## Usage
|
||||
|
||||
### Import on demand in vite projects (recommended)
|
||||
### Import on demand (recommended)
|
||||
|
||||
If you are using vite, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
|
||||
If you are using vite, webpack or vue-cli, please use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
|
||||
|
||||
#### 1. Install Plugin
|
||||
|
||||
@ -111,7 +111,7 @@ pnpm add unplugin-vue-components -D
|
||||
|
||||
#### 2. Configure Plugin
|
||||
|
||||
Configure the plugin in the `vite.config.js` file:
|
||||
For `vite` based project，configure the plugin in the `vite.config.js` file:
|
||||
|
||||
```js
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
@ -128,6 +128,38 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
For `vue-cli` based project，configure the plugin in the `vue.config.js` file:
|
||||
|
||||
```js
|
||||
const { VantResolver } = require('unplugin-vue-components/resolvers');
|
||||
const ComponentsPlugin = require('unplugin-vue-components/webpack');
|
||||
|
||||
module.exports = {
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
ComponentsPlugin({
|
||||
resolvers: [VantResolver()],
|
||||
}),
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
For `webpack` based project，configure the plugin in the `webpack.config.js` file:
|
||||
|
||||
```js
|
||||
const { VantResolver } = require('unplugin-vue-components/resolvers');
|
||||
const ComponentsPlugin = require('unplugin-vue-components/webpack');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
ComponentsPlugin({
|
||||
resolvers: [VantResolver()],
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
#### 3. Import Components
|
||||
|
||||
Then you can import components from Vant:
|
||||
@ -140,51 +172,7 @@ const app = createApp();
|
||||
app.use(Button);
|
||||
```
|
||||
|
||||
> Vant supports Tree Shaking by default.
|
||||
|
||||
### Import on demand in non-vite projects (recommended)
|
||||
|
||||
In non-vite projects, use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand.
|
||||
|
||||
#### 1. Install Plugin
|
||||
|
||||
```bash
|
||||
npm i babel-plugin-import -D
|
||||
```
|
||||
|
||||
#### 2. Configure Plugin
|
||||
|
||||
Set babel config in `.babelrc` or `babel.config.js`:
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
[
|
||||
"import",
|
||||
{
|
||||
"libraryName": "vant",
|
||||
"libraryDirectory": "es",
|
||||
"style": true
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 3. Import Components
|
||||
|
||||
Then you can import components from Vant:
|
||||
|
||||
```js
|
||||
// Input
|
||||
import { Button } from 'vant';
|
||||
|
||||
// Output
|
||||
import Button from 'vant/es/button';
|
||||
import 'vant/es/button/style';
|
||||
```
|
||||
|
||||
> If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
|
||||
> Vant supports tree shaking by default, so you don't necessarily need the webpack plugin, if you can't accept the full import of css.
|
||||
|
||||
### Import all components (not recommended)
|
||||
|
||||
@ -199,8 +187,6 @@ const app = createApp();
|
||||
app.use(Vant);
|
||||
```
|
||||
|
||||
> If you configured babel-plugin-import, you won't be allowed to import all components.
|
||||
|
||||
### Manually import (not recommended)
|
||||
|
||||
```js
|
||||
|
||||
@ -93,9 +93,9 @@ pnpm add vant
|
||||
|
||||
## 引入组件
|
||||
|
||||
### 在 vite 项目中按需引入组件（推荐）
|
||||
### 按需引入组件（推荐）
|
||||
|
||||
在 vite 项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。
|
||||
在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。
|
||||
|
||||
#### 1. 安装插件
|
||||
|
||||
@ -112,7 +112,7 @@ pnpm add unplugin-vue-components -D
|
||||
|
||||
#### 2. 配置插件
|
||||
|
||||
安装完成后，在 `vite.config.js` 文件中配置插件：
|
||||
如果是基于 `vite` 的项目，在 `vite.config.js` 文件中配置插件：
|
||||
|
||||
```js
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
@ -129,6 +129,38 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
如果是基于 `vue-cli` 的项目，在 `vue.config.js` 文件中配置插件：
|
||||
|
||||
```js
|
||||
const { VantResolver } = require('unplugin-vue-components/resolvers');
|
||||
const ComponentsPlugin = require('unplugin-vue-components/webpack');
|
||||
|
||||
module.exports = {
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
ComponentsPlugin({
|
||||
resolvers: [VantResolver()],
|
||||
}),
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
如果是基于 `webpack` 的项目，在 `webpack.config.js` 文件中配置插件：
|
||||
|
||||
```js
|
||||
const { VantResolver } = require('unplugin-vue-components/resolvers');
|
||||
const ComponentsPlugin = require('unplugin-vue-components/webpack');
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
ComponentsPlugin({
|
||||
resolvers: [VantResolver()],
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
#### 3. 引入组件
|
||||
|
||||
完成以上两步，就可以直接使用 Vant 组件了：
|
||||
@ -141,51 +173,7 @@ const app = createApp();
|
||||
app.use(Button);
|
||||
```
|
||||
|
||||
> Vant 默认支持通过 Tree Shaking 实现 script 的按需引入。
|
||||
|
||||
### 在非 vite 项目中按需引入组件（推荐）
|
||||
|
||||
在非 vite 的项目中，可以通过 babel 插件来实现按需引入组件。我们需要安装 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。
|
||||
|
||||
#### 1. 安装插件
|
||||
|
||||
```bash
|
||||
npm i babel-plugin-import -D
|
||||
```
|
||||
|
||||
#### 2. 配置插件
|
||||
|
||||
在.babelrc 或 babel.config.js 中添加配置：
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
[
|
||||
"import",
|
||||
{
|
||||
"libraryName": "vant",
|
||||
"libraryDirectory": "es",
|
||||
"style": true
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 3. 引入组件
|
||||
|
||||
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式。
|
||||
|
||||
```js
|
||||
// 原始代码
|
||||
import { Button } from 'vant';
|
||||
|
||||
// 编译后代码
|
||||
import Button from 'vant/es/button';
|
||||
import 'vant/es/button/style';
|
||||
```
|
||||
|
||||
> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
|
||||
> 注意：Vant 默认支持通过 Tree Shaking，因此你也可以不配置任何插件，直接通过 Tree Shaking 来移除不需要的 JS 代码，但 CSS 无法通过这种方式优化。
|
||||
|
||||
### 导入所有组件（不推荐）
|
||||
|
||||
@ -200,8 +188,6 @@ const app = createApp();
|
||||
app.use(Vant);
|
||||
```
|
||||
|
||||
> Tips: 配置按需引入插件后，将不允许直接导入所有组件。
|
||||
|
||||
### 手动按需引入组件（不推荐）
|
||||
|
||||
在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user