Vue 中 使用 Vant UI组件
Vue 中 使用 Vant UI轻量组件库特附官网https://youzan.github.io/vant-weapp/#/button在Vue中使用vant UI1.全局引入第一步先要下载这个组件npm install vant -S第二步导入所有组件import Vant from 'vant'import 'vant/lib/index.css'Vue.use(Vant)第三步 在页面中即
·
Vue 中 使用 Vant UI轻量组件库
特附官网https://youzan.github.io/vant-weapp/#/button
在Vue中使用vant UI
1.全局引入
第一步先要下载这个组件
npm install vant -S
第二步 导入所有组件
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
第三步 在页面中即可直接引入组件
页面代码演示
<template>
<div>
<h1>这是页面</h1>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button style="margin-left:20px" loading type="primary" loading-type="spinner" />
</div>
</template>
2.局部引入
第一步 按需引用
必须要下载
npm i babel-plugin-import -D
第二步 按需引用
在.babelrc 中添加配置
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
第三步 按需引用
在页面中直接引入组件使用
<template>
<van-button type="primary">Primary</van-button>
</template>
<script>
import {Button} from 'vant'
export default {
components: {
[Button.name]: Button
}
}
</script>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)