vue中使用vant(按需引入方式)
环境 vue-cli 3.0
搭建vue-cli 3.0 (npm 环境)
npm install -g @vue/cli
查看vue版本 3.0以上就OK
vue -V
命令提示框中输入 vue ui 等待启动
vue ui
直接上图
必须安装依赖
- 参考Vant 官网的文档
方式一. 自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
# 安装插件
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']
]
};
babel 7 在这个文件夹下
按需引入
在main.js中
import ‘vant/lib/index.css’;
import { Button } from ‘vant’;
//按需引入
Vue.use(Button);
<template>
<div class="about">
<h1>This is an about page</h1>
<van-button>1234</van-button>
</div>
</template>
<script>
export default {
data() {
return {
active: 0
};
}
};
</script>
效果