1.需求分析
联系人列表
新建 编辑 获取 删除
2.环境配置
vue-cli搭建项目工程目录
vant 组件库(vue,移动端,推荐使用vue-cli3,babel.config.js)
3.静态页面
ContactList.vue
vant Button(import引入,components注册[Button.name],按需引入)
router.js path name component:()=>importy('./views/ComtactList.vue')
3.调试接口
url methods 参数(path,body) 备注
data return(注释值的类型) methods(注释方法的作用)
van-contact-list :list="list" :contact-info="editingContact" isEdit=false showEdit=false
@add="onAdd" @save="onSave" @delete="onDelete"
@edit="onEdit(info)"
4.功能点
this.instance = created axios.create({baseURL:"",timeout})
this.instance.get('/contactList').then(res=>{this.list = res.data.data}).catch(err=>{Toast('请求失败,清稍后重试')})
5.封装axios
封装url
service.js
export default const CONTACT_API = {
getContactList:{
method:'post',
url:'/contact/new/form'
}
}
http.js