一.vant 的安装
1.安装
简写形式：npm i vant -S
完整形式：npm install vant -save
2.按需引入
1.需要安装babel插件 --babel-plugin-import
指令:npm i babel-plugin-import -D (简写)
完整指令:npm install babel-plugin-import --save-dev
2.在babel.config.js中配置文件
// 在.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']
]
};
3.在main.js中引入即可在组建中使用
import { Button } from 'vant'
Vue.use(Button)
4.按需引入的封装如下
1.在main.js中引入如下
// 全局引入
import 'vant/lib/index.css';
// 按需引入UI库 vant
import '@/plugins/vant'
2.在src文件夹中创建如下文件夹
image.png
3.放置想要使用的文件
// 按需全局引入 vant组件
import Vue from 'vue'
// 导航栏
import { NavBar ,} from 'vant';
// 轮播
import { Swipe, SwipeItem } from 'vant';
Vue.use(NavBar);
Vue.use(Swipe);
Vue.use(SwipeItem);
3.全局引用
1.直接在main.js中直接引入如下
import Vant from "vant"
import "van/lib/vant-css/index.css"
Vue.use(vant)
2.在需要的组建中直接引入然后使用
import { Button } from 'vant'
<van-button type="primary">主要按钮</van-button>
