blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(quickstart): update cdn guide (#4456)

Browse Source
This commit is contained in:
neverland 2019-09-14 11:10:23 +08:00 committed by GitHub
parent 4f4608232c
commit 3c761cec1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,23 +93,25 @@ Vue.use(Vant);
### 4. CDN
The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`.
```html
<!-- import style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/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@2.2/lib/vant.min.js"></script>
<script>
var Vue = window.Vue;
var vant = window.vant;
// Render the Button component
new Vue({
el: '#app',
template: `<van-button>Button</van-button>`
});
// Register Lazyload component
Vue.use(vant.Lazyload);
// Call function components
vant.Toast('message');
// Call function component
vant.Toast('Message');
</script>
```

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

@ -98,23 +98,25 @@ Vue.use(Vant);
### 方式四. 通过 CDN 引入
使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量`vant`访问到所有组件。
```html
<!-- 引入样式 -->
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
<!-- 引入组件 -->
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script>
var Vue = window.Vue;
var vant = window.vant;
// 在 #app 标签下渲染一个按钮组件
new Vue({
el: '#app',
template: `<van-button>按钮</van-button>`
});
// 注册 Lazyload 组件
Vue.use(vant.Lazyload);
// 调用函数式组件
vant.Toast('提示');
// 调用函数组件，弹出一个 Toast
vant.Toast('提示');
</script>
```