安装
npm i vant -S(简写)
npm install vant --save(完整写法)
引入
1全局引入
main.js:import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant)
2、按需引入(推荐)
首先,安装babel-plugin-import
npm i babel-plugin-import -D(简写)
npm install babel-plugin-import --save-dev(完整写法)
// 在.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 组件
// 插件会自动将代码转化为方式二中的按需引入形式
最后,在main.js中
import {Button} from 'vant'
Vue.use(Button)
// 引入的多的话
import { Button, Row, Col } from 'vant'
Vue.use(Button).use(Row).use(Col)
3、如果想在页面中单独使用组件
import { Button, Row, Col } from 'vant'
export default{
components: {
[Button.name]:Button // 有的组件有专门的引入方式,比如Dialog,可以看看
}
}
标签: 使用
版权声明:本站所有图片/内容除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!