diff --git a/packages/create-vant-cli-app/generators/vue2/package.json.tpl b/packages/create-vant-cli-app/generators/vue2/package.json.tpl index b8785f752..c51c9f126 100644 --- a/packages/create-vant-cli-app/generators/vue2/package.json.tpl +++ b/packages/create-vant-cli-app/generators/vue2/package.json.tpl @@ -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" }, diff --git a/packages/vant-cli/docs/directory.md b/packages/vant-cli/docs/directory.md index 6a49c902f..b1731753c 100644 --- a/packages/vant-cli/docs/directory.md +++ b/packages/vant-cli/docs/directory.md @@ -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. diff --git a/packages/vant-cli/docs/directory.zh-CN.md b/packages/vant-cli/docs/directory.zh-CN.md index a0e6a77ef..6f3f2f400 100644 --- a/packages/vant-cli/docs/directory.zh-CN.md +++ b/packages/vant-cli/docs/directory.zh-CN.md @@ -42,7 +42,7 @@ button └─ README.md # 组件文档 ``` -采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。 +采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件。 通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。 diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md index 52097b3ac..759a093b7 100644 --- a/packages/vant/docs/markdown/quickstart.en-US.md +++ b/packages/vant/docs/markdown/quickstart.en-US.md @@ -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 diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index 050d5e447..de5aec147 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -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: 配置按需引入插件后，将不允许直接导入所有组件。 - ### 手动按需引入组件（不推荐） 在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。