Vant 的安装
Vant 可以用于 vue 里来美化代码,首先看进行安装,搜索 npm ,在npm 搜索 vant , 在 cmd 里面输入 npm i vant -S
即可下载成功
相关插件
npm i babel-plugin-import -D
以下参考官方文档
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
接着就可以在代码中直接引入 Vant 组件
例如:
import { Button } from 'vant';
实例展示
现在就来看以下一个实例展示伐:
这里展示的是一个基础用法,前提是要把 Vant 下载完成,博主这里展示以下按钮以及文本框这一类
首先先看一下原页面
看这个页面我们可以发现可以修改文本框或者按钮来美化,打开
https://youzan.github.io/vant/#/zh-CN/quickstart 找到快速上手那一部分,在右侧可以看有很多的组件
点击需要的组件,把引入那部分的代码先写到自己的代码当中,然后再在 template 里使用即可
最后看一下效果图
就这样完成啦 那个超链接的地址很好用邓一定要去看呀 如果文章有错误的地方欢迎留言蟹蟹