【VUE2.0】11、vant组件、axios高级封装

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()
  }
}