vant
https://vant-contrib.gitee.io/vant/#/zh-CN/
安装:npm i vant
1 使用vant
1.1 按需引入组件
npm i babel-plugin-import -D
1.2 配置babel(新增配置)
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
重启
2 全局注册
import {
Button } from 'vant'; main.js
Vue.use(Button);
3 局部注册
import {
Button } from 'vant';
export default {
name: 'App',
components: {
[Button.name]: Button,
}
}
4 使用
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button> app.vue
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
5 联系人卡片
main.js配置环境并下载依赖 npm i vue-router axios vant
注册总线 Vue.prototype.$bus = new Vue()
路由环境 ==>router routes pages import router from "router/router"
vant ==>utils import "util/vant"
axios ==>api
vuex ==>store import store from "store/store"
配置环境:
① 路由环境:
router.js
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
// 引入routes
import routes from "routes/routes"
// 暴露
export default new VueRouter({
routes
})
routes.js
import contact from "pages/contact"
export default [
{
path:"contact",component:contact},