vue的UI框架之有赞移动端vant-ui
最近公司不忙比较闲,于是研究了一下前端ui框架相关的一些东西npm安装npm i vant -S一般我们使用ui框架都是按需引入这里我们只讨论按需引入,按需引入我们需要安装一个依赖包babel-plugin通过命令行安装npm i babel-plugin-import -D配置然后需要配置.babelrc文件中的plugins这一项加入如下代码(注意是加入而不是替换默认的代码) ...
·
最近公司不忙比较闲,于是研究了一下前端ui框架相关的一些东西
npm安装
npm i vant -S
一般我们使用ui框架都是按需引入这里我们只讨论按需引入,按需引入我们需要安装一个依赖包babel-plugin通过命令行安装
npm i babel-plugin-import -D
配置
然后需要配置.babelrc文件中的plugins这一项加入如下代码(注意是加入而不是替换默认的代码)
"plugins": [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]
使用
在main.js中引入import 'vant/lib/vant-css/index.css';这个总样式文件
import { Button } from 'vant' 引入需要用到的样式组件
Vue.use(Button) 在vue实例中使用引入的样式组件
在.vue文件中按照官方的方法使用如下
<van-button type="default" size="large">大号按钮</van-button><br> <van-button type="primary" size="normal">普通按钮</van-button><br> <van-button type="warning" size="small">小型按钮</van-button><br> <van-button type="danger" size="mini">迷你按钮</van-button><br>
更多推荐
已为社区贡献28条内容
所有评论(0)