vant 版 联系人添加和修改

本文介绍如何在Vue.js项目中结合 vant UI 库实现联系人管理功能。首先,通过axios_node_api-master搭建服务器环境,接着安装并引入vant组件库,特别是ContactList、ContactEdit等组件,用于展示和编辑联系人。
摘要由CSDN通过智能技术生成

1 发给一个axios_node_api-master 的压缩包 在压缩包里打开cmd窗口 下载依赖 cnpm install 然后在输入node index.js 启动文件 会出现服务器启动成功

2下载vant 在man.js文件中匹配
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import “./rem”
import axios from ‘axios’
Vue.prototype.$axios=axios
import ‘swiper/css/swiper.min.css’
//这里是重点!!!!!!!!!
import {Button,ContactList,Toast,Popup, ContactEdit} from “vant”
import “vant/lib/index.css”
Vue.use(Button)
Vue.use(ContactList)
Vue.use(Toast)
Vue.use(Popup)
Vue.use(ContactEdit)
Vue.config.productionTip = false

			/* eslint-disable no-new */
			new Vue({
			  el: '#app',
			  router,
			  components: { App },
			  template: '<App/>'
			})

	在vant中找到联系人模块复制




				<template>
					  <div id="app">
					        <van-contact-list
					  
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值