blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-07 13:09:45 +08:00
Code Issues Projects Releases Wiki Activity

[Doc] update README.md and quickstart

Browse Source
This commit is contained in:
陈嘉涵 2019-05-28 10:00:02 +08:00
parent 46a051cb05
commit a4da1c7673
4 changed files with 49 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
README.md
View File

@ -43,67 +43,16 @@ npm i vant -S
npm i vant@beta -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 ## 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 ```js
import Vue from 'vue'; import Vue from 'vue';
import Vant from 'vant'; import { Button } from 'vant';
import 'vant/lib/index.css'; 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). See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).
## Contribution ## Contribution
@ -122,7 +71,6 @@ Modern browsers and Android 4.0+, iOS 6+.
* [Vant Weapp: Weapp UI](https://github.com/youzan/vant-weapp) * [Vant Weapp: Weapp UI](https://github.com/youzan/vant-weapp)
* [Zent: PC UI base on React](https://youzan.github.io/zent) * [Zent: PC UI base on React](https://youzan.github.io/zent)
## Preview ## Preview
You can scan the following QR code to access the demo： You can scan the following QR code to access the demo：

73
README.zh-CN.md
View File

@ -42,84 +42,17 @@ npm i vant -S
npm i vant@beta -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 ```js
import Vue from 'vue'; import Vue from 'vue';
import Vant from 'vant'; import { Button } from 'vant';
import 'vant/lib/index.css'; import 'vant/lib/index.css';
Vue.use(Vant); Vue.use(Button);
``` ```
> 注意：配置 babel-plugin-import 插件后将不允许导入所有组件 vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手](https://youzan.github.io/vant#/zh-CN/quickstart).
更多内容请参考 [快速上手](https://youzan.github.io/vant#/zh-CN/quickstart).
## 贡献代码 ## 贡献代码

33
docs/markdown/quickstart.en-US.md
View File

@ -29,17 +29,6 @@ npm i vant -S
npm i vant@beta -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 ## Usage
### 1. Import on demand ### 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. > 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 ## Other
### Rem units ### Rem units

33
docs/markdown/quickstart.zh-CN.md
View File

@ -38,17 +38,6 @@ npm i vant -S
npm i vant@beta -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 插件后将不允许导入所有组件 > 注意：配置 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 适配 ### Rem 适配