mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-10-10 02:39:57 +08:00
[changelog] 2.0.0-beta.0
This commit is contained in:
parent
cdde0fa5d8
commit
ec6820cf31
@ -59,18 +59,17 @@ yarn add vant
|
|||||||
|
|
||||||
## 快速上手
|
## 快速上手
|
||||||
|
|
||||||
#### 方式一. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
|
### 方式一. 自动按需引入组件 (推荐)
|
||||||
|
|
||||||
`babel-plugin-import` 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
|
|
||||||
|
|
||||||
|
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
|
||||||
```bash
|
```bash
|
||||||
# 安装 babel-plugin-import 插件
|
# 安装插件
|
||||||
npm i babel-plugin-import -D
|
npm i babel-plugin-import -D
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// 在 .babelrc 或 babel-loader 中添加插件配置
|
// 在.babelrc 中添加配置
|
||||||
// 注意:webpack 1 无需设置 libraryDirectory。
|
// 注意:webpack 1 无需设置 libraryDirectory
|
||||||
{
|
{
|
||||||
"plugins": [
|
"plugins": [
|
||||||
["import", {
|
["import", {
|
||||||
@ -80,17 +79,28 @@ npm i babel-plugin-import -D
|
|||||||
}]
|
}]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
['import', {
|
||||||
|
libraryName: 'vant',
|
||||||
|
libraryDirectory: 'es',
|
||||||
|
style: true
|
||||||
|
}, 'vant']
|
||||||
|
]
|
||||||
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式。
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
// 接着你可以在代码中直接引入 Vant 组件
|
||||||
|
// 插件会自动将代码转化为方式二中的按需引入形式
|
||||||
import { Button } from 'vant';
|
import { Button } from 'vant';
|
||||||
```
|
```
|
||||||
|
|
||||||
> 如果你在使用 TypeScript,可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入
|
> 如果你在使用 TypeScript,可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入
|
||||||
|
|
||||||
#### 方式二. 按需引入组件
|
### 方式二. 手动按需引入组件
|
||||||
|
|
||||||
在不使用插件的情况下,可以手动引入需要的组件
|
在不使用插件的情况下,可以手动引入需要的组件
|
||||||
|
|
||||||
@ -99,7 +109,9 @@ import Button from 'vant/lib/button';
|
|||||||
import 'vant/lib/button/style';
|
import 'vant/lib/button/style';
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 方式三. 导入所有组件
|
### 方式三. 导入所有组件
|
||||||
|
|
||||||
|
Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -88,7 +88,7 @@ module.exports = {
|
|||||||
```js
|
```js
|
||||||
// 接着你可以在代码中直接引入 Vant 组件
|
// 接着你可以在代码中直接引入 Vant 组件
|
||||||
// 插件会自动将代码转化为方式二中的按需引入形式
|
// 插件会自动将代码转化为方式二中的按需引入形式
|
||||||
import { Button, Cell } from 'vant';
|
import { Button } from 'vant';
|
||||||
```
|
```
|
||||||
|
|
||||||
> 如果你在使用 TypeScript,可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入
|
> 如果你在使用 TypeScript,可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入
|
||||||
|
@ -71,7 +71,7 @@
|
|||||||
"@babel/preset-env": "^7.4.4",
|
"@babel/preset-env": "^7.4.4",
|
||||||
"@babel/preset-typescript": "^7.3.3",
|
"@babel/preset-typescript": "^7.3.3",
|
||||||
"@types/jest": "^24.0.13",
|
"@types/jest": "^24.0.13",
|
||||||
"@vant/doc": "^2.2.0",
|
"@vant/doc": "^2.2.2",
|
||||||
"@vant/eslint-config": "^1.1.2",
|
"@vant/eslint-config": "^1.1.2",
|
||||||
"@vant/markdown-loader": "^2.0.0",
|
"@vant/markdown-loader": "^2.0.0",
|
||||||
"@vue/babel-preset-jsx": "^1.0.0",
|
"@vue/babel-preset-jsx": "^1.0.0",
|
||||||
|
@ -2,8 +2,8 @@
|
|||||||
|
|
||||||
.van-col {
|
.van-col {
|
||||||
float: left;
|
float: left;
|
||||||
min-height: 1px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
min-height: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.generate-col(24);
|
.generate-col(24);
|
||||||
|
@ -1024,10 +1024,10 @@
|
|||||||
lodash.unescape "4.0.1"
|
lodash.unescape "4.0.1"
|
||||||
semver "5.5.0"
|
semver "5.5.0"
|
||||||
|
|
||||||
"@vant/doc@^2.2.0":
|
"@vant/doc@^2.2.2":
|
||||||
version "2.2.0"
|
version "2.2.2"
|
||||||
resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.2.0.tgz#ffe3592d1a36023ca2cfd81be2f86a417e221869"
|
resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.2.2.tgz#0c32c44e37da12cc5478583b53d42a70aca9aa27"
|
||||||
integrity sha512-PW90FaXdJFa1kbzuCEfH+9nRvf3S3ha2OSViCuMWVU8su8JP+tozIz+JtgiX7Y/P/VWG+X6MuowzvWAGOhnWog==
|
integrity sha512-FpzGa/0w+vS+qLuFDUH+Gby8MNgDs2dLaVu3sE8RGZ70mfztU+sVLjrKkUMjIKdI1Q6ejmtQJEgiwACN3vRGeA==
|
||||||
dependencies:
|
dependencies:
|
||||||
cheerio "0.22.0"
|
cheerio "0.22.0"
|
||||||
commander "^2.17.1"
|
commander "^2.17.1"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user