mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-31 10:49:15 +08:00
[Doc] update README.md and quickstart
This commit is contained in:
陈嘉涵
parent
46a051cb05
commit
a4da1c7673
56
README.md
56
README.md
@ -43,67 +43,16 @@ npm i vant -S
|
||||
npm i vant@beta -S
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
```html
|
||||
<!-- import style -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css" />
|
||||
|
||||
<!-- import script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
|
||||
```
|
||||
|
||||
## Quickstart
|
||||
|
||||
#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
|
||||
|
||||
```bash
|
||||
# Install babel-plugin-import
|
||||
npm i babel-plugin-import -D
|
||||
```
|
||||
|
||||
```js
|
||||
// set babel config in .babelrc or babel-loader
|
||||
// Note: Don't set libraryDirectory if you are using webpack 1.
|
||||
{
|
||||
"plugins": [
|
||||
["import", {
|
||||
"libraryName": "vant",
|
||||
"libraryDirectory": "es",
|
||||
"style": true
|
||||
}]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Then you can import components from vant, equivalent to import manually below.
|
||||
|
||||
```js
|
||||
import { Button } from 'vant';
|
||||
```
|
||||
|
||||
> If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead
|
||||
|
||||
#### 2. Manually import
|
||||
|
||||
```js
|
||||
import Button from 'vant/lib/button';
|
||||
import 'vant/lib/button/style';
|
||||
```
|
||||
|
||||
#### 3. Import all components
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import Vant from 'vant';
|
||||
import { Button } from 'vant';
|
||||
import 'vant/lib/index.css';
|
||||
|
||||
Vue.use(Vant);
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
> If you configured babel-plugin-import, you won't be allowed to import all components.
|
||||
|
||||
See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).
|
||||
|
||||
## Contribution
|
||||
@ -122,7 +71,6 @@ Modern browsers and Android 4.0+, iOS 6+.
|
||||
* [Vant Weapp: Weapp UI](https://github.com/youzan/vant-weapp)
|
||||
* [Zent: PC UI base on React](https://youzan.github.io/zent)
|
||||
|
||||
|
||||
## Preview
|
||||
|
||||
You can scan the following QR code to access the demo：
|
||||
|
||||
@ -42,84 +42,17 @@ npm i vant -S
|
||||
npm i vant@beta -S
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
```html
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css">
|
||||
|
||||
<!-- 引入组件 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
|
||||
```
|
||||
|
||||
## 快速上手
|
||||
|
||||
### 方式一. 自动按需引入组件 (推荐)
|
||||
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
|
||||
```bash
|
||||
# 安装插件
|
||||
npm i babel-plugin-import -D
|
||||
```
|
||||
|
||||
```js
|
||||
// 在.babelrc 中添加配置
|
||||
// 注意：webpack 1 无需设置 libraryDirectory
|
||||
{
|
||||
"plugins": [
|
||||
["import", {
|
||||
"libraryName": "vant",
|
||||
"libraryDirectory": "es",
|
||||
"style": true
|
||||
}]
|
||||
]
|
||||
}
|
||||
|
||||
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
|
||||
module.exports = {
|
||||
plugins: [
|
||||
['import', {
|
||||
libraryName: 'vant',
|
||||
libraryDirectory: 'es',
|
||||
style: true
|
||||
}, 'vant']
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
```js
|
||||
// 接着你可以在代码中直接引入 Vant 组件
|
||||
// 插件会自动将代码转化为方式二中的按需引入形式
|
||||
import { Button } from 'vant';
|
||||
```
|
||||
|
||||
> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入
|
||||
|
||||
### 方式二. 手动按需引入组件
|
||||
|
||||
在不使用插件的情况下，可以手动引入需要的组件
|
||||
|
||||
```js
|
||||
import Button from 'vant/lib/button';
|
||||
import 'vant/lib/button/style';
|
||||
```
|
||||
|
||||
### 方式三. 导入所有组件
|
||||
|
||||
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import Vant from 'vant';
|
||||
import { Button } from 'vant';
|
||||
import 'vant/lib/index.css';
|
||||
|
||||
Vue.use(Vant);
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
> 注意：配置 babel-plugin-import 插件后将不允许导入所有组件
|
||||
|
||||
更多内容请参考 [快速上手](https://youzan.github.io/vant#/zh-CN/quickstart).
|
||||
vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手](https://youzan.github.io/vant#/zh-CN/quickstart).
|
||||
|
||||
## 贡献代码
|
||||
|
||||
|
||||
@ -29,17 +29,6 @@ npm i vant -S
|
||||
npm i vant@beta -S
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
||||
```html
|
||||
<!-- import style -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css" />
|
||||
|
||||
<!-- import script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### 1. Import on demand
|
||||
@ -102,6 +91,28 @@ Vue.use(Vant);
|
||||
|
||||
> If you configured babel-plugin-import, you won't be allowed to import all components.
|
||||
|
||||
### 4. CDN
|
||||
|
||||
```html
|
||||
<!-- import style -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css" />
|
||||
|
||||
<!-- import script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
|
||||
|
||||
<script>
|
||||
var Vue = window.Vue;
|
||||
var vant = window.vant;
|
||||
|
||||
// Register components
|
||||
Vue.use(vant);
|
||||
|
||||
// Call function components
|
||||
vant.Toast('message');
|
||||
</script>
|
||||
```
|
||||
|
||||
## Other
|
||||
|
||||
### Rem units
|
||||
|
||||
@ -38,17 +38,6 @@ npm i vant -S
|
||||
npm i vant@beta -S
|
||||
```
|
||||
|
||||
### 通过 CDN 引入
|
||||
|
||||
```html
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css">
|
||||
|
||||
<!-- 引入组件 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
|
||||
```
|
||||
|
||||
## 引入组件
|
||||
|
||||
### 方式一. 自动按需引入组件 (推荐)
|
||||
@ -116,6 +105,28 @@ Vue.use(Vant);
|
||||
|
||||
> 注意：配置 babel-plugin-import 插件后将不允许导入所有组件
|
||||
|
||||
### 方式四. 通过 CDN 引入
|
||||
|
||||
```html
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css">
|
||||
|
||||
<!-- 引入组件 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
|
||||
|
||||
<script>
|
||||
var Vue = window.Vue;
|
||||
var vant = window.vant;
|
||||
|
||||
// 注册组件
|
||||
Vue.use(vant);
|
||||
|
||||
// 调用函数式组件
|
||||
vant.Toast('提示');
|
||||
</script>
|
||||
```
|
||||
|
||||
## 其他
|
||||
|
||||
### Rem 适配
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user