1.
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);
Code demo
<template><divclass="about"><h1>This is an about page</h1><van-button>1234</van-button></div></template><script>exportdefault { data() { return { active: 0 }; } }; </script>
最终效果
