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

update README.md: add babel-plugin-import

Browse Source
This commit is contained in:
陈嘉涵 2017-08-09 16:19:11 +08:00
parent 05181edd52
commit 4e57dfa797
2 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
README.md
View File

@ -18,11 +18,36 @@ npm i -S vant
```
## Usage
### Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
```js
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "vant", "style": true }]
]
}
```
Then you can import components from vant, equivalent to import manually below.
```js
// import js and css modularly, parsed by babel-plugin-import
import { Button } from 'vant';
```
### Manually import
```jsx
import { Button } from 'vant';
import 'vant/lib/vant-css/button.css';
```
### Import all components
```javascript
```javascrip
import Vue from 'vue';
import vant from 'vant';
import 'vant/lib/vant-css/index.css';
@ -30,18 +55,6 @@ import 'vant/lib/vant-css/index.css';
Vue.use(vant);
```
### On demand
```javascript
import Vue from 'vue';
import { Button, Cell } from 'vant';
import 'vant/lib/vant-css/button.css';
import 'vant/lib/vant-css/cell.css';
Vue.component(Button.name, Button);
Vue.component(Cell.name, Cell);
```
## Development
### Add a new component

42
README.zh-CN.md
View File

@ -18,28 +18,40 @@ npm i -S vant
## 二、使用
### 1. 导入所有组件
### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
```js
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "vant", "style": true }]
]
}
```
  接着你可以直接引入 vant 组件，等价于下方的按需引入组件
```js
  // 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
  import { Button } from 'vant';
```
### 按需引入组件
```jsx
import { Button } from 'vant/lib/button';
import 'vant/lib/vant-css/button.css';
```
```javascript
### 导入所有组件
```javascrip
import Vue from 'vue';
import vant from 'vant';
// 你也可以使用自己的主题
import 'vant/lib/vant-css/index.css';
Vue.use(vant);
```
### 2. 按需导入组件
```javascript
import Vue from 'vue';
import { Button, Cell } from 'vant';
import 'vant/lib/vant-css/button.css';
import 'vant/lib/vant-css/cell.css';
Vue.component(Button.name, Button);
Vue.component(Cell.name, Cell);
```
## 三、开发