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 ### 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 ```html
<!-- import style --> <!-- 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 --> <!-- import script -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></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 src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script> <script>
var Vue = window.Vue; // Render the Button component
var vant = window.vant; new Vue({
el: '#app',
template: `<van-button>Button</van-button>`
});
// Register Lazyload component // Call function component
Vue.use(vant.Lazyload); vant.Toast('Message');
// Call function components
vant.Toast('message');
</script> </script>
``` ```

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

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