[Doc]: add CDN link

This commit is contained in:
陈嘉涵 2017-10-20 11:22:22 +08:00
parent a2f4a4ed83
commit 45e134fa7e
5 changed files with 26 additions and 76 deletions

View File

@ -17,43 +17,8 @@
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
import Vue from 'vue';
import vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(vant);
```
## Quickstart
See [Quickstart](https://www.youzanyun.com/zanui/vue#/en-US/component/quickstart).
## How to contribute

View File

@ -15,43 +15,8 @@
npm i -S vant
```
## 二、使用
### 使用 [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
import Vue from 'vue';
import vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(vant);
```
## 二、快速上手
参考 [Quickstart](https://www.youzanyun.com/zanui/vue#/zh-CN/component/quickstart).
## 三、贡献代码

View File

@ -47,3 +47,13 @@ import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
```
### CDN
```html
<!-- import style -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
<!-- import script --><script></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
```

View File

@ -48,6 +48,16 @@ import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
```
### CDN
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<!-- 引入组件 --><script></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
```
### 自定义主题
`Vant`提供了一套默认主题CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者部分样式,可以使用下面的方法:

View File

@ -12,7 +12,7 @@ module.exports = {
微信小程序: 'https://github.com/youzan/zanui-weapp',
意见反馈: 'https://github.com/youzan/vant/issues',
开发指南:
'https://github.com/youzan/vant/blob/dev/docs/examples-docs/zh-CN/contribute.md'
'https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.zh-CN.md'
}
},
nav: [
@ -268,7 +268,7 @@ module.exports = {
Weapp: 'https://github.com/youzan/zanui-weapp',
Feedback: 'https://github.com/youzan/vant/issues',
Contribute:
'https://github.com/youzan/vant/blob/dev/docs/examples-docs/en-US/contribute.md'
'https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.md'
}
},
nav: [