【VUE2.0】11、vant组件、axios高级封装
vant组件
·
1.view和component目录的区别:
通过路由切换展示的组件放在view目录下
复用组件放在component目录下
2.vant组件的安装、配置
安装:
npm i vant@latest-v2 -S
在main.js中全局导入:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
3.vant主题定制
4.axios的高级封装
在src目录下新建utils/request.js文件
import axios from 'axios'
const request = axios.create({
baseURL: 'xxx'
})
export default request
在src目录下新建api/xxxAPI.js文件(同理可使用多个api.js文件来完成其他接口的调用)
import request from '../utils/request.js'
export const getArticle = function (_page, _limit) {
return request.get('/xxx', { params: { _page, _limit } })
}
在使用时
import { getArticle } from '../../api/articleAPI.js'
export default {
name: 'Home',
data () {
return {
page: 1,
limit: 10
}
},
methods: {
async initPage () {
const { data: res } = await getArticle(this.page, this.limit)
console.log(res)
}
},
created () {
this.initPage()
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)