vue项目搭建以及全家桶的使用详细教程(小结)

做完这一步，其实我们的过滤器还没写完，还需要在main.js中写一个注册函数：

import Vue from 'vue'
import App from './App'
import router from './router'
import filters from './assets/js/filters'
import 'iview/dist/styles/iview.css';
Object.keys(filters).forEach(key =>{
 Vue.filter(key,filters[key])
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

这样，我们就把filters文件下的过滤器函数注册到Vue全局下，同样道理，我们可以按照同样的思路注册全局组件，我们在src>assets>js下新建一个components.js文件，在其中引入我们想注册的全局组件，export出一个对象，使用Object.keys获取后注册到全局下：

//components.js下
import testInput from '@/components/testInput.vue'
export default{
 testInput:testInput
}

//main.js下
import components from './assets/js/components'
Object.keys(components).forEach(key => {
 Vue.component(key,components[key])
})

优雅的注册全局组件和全局过滤器已经讲完，接下来就是API管理阶段了。

步骤七、请求api管理

这里我们使用axios发起异步的请求，安装很简单，npm install axios 即可，一开始的时候，我使用的是直接在每个组件内使用axios,到后面发现，但当我需要修改api接口的时候，需要查找的比较麻烦，只因为没有集中的对所有的api进行管理，而且每个请求回来的接口都需要写对应的报错处理，着实麻烦，这里我新建一个fecth文件夹并在其下新建一个api.js用来存放所有的axios处理和封装，：

//fetch/api.js
import axios from 'axios'
export function fetch(url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, params).then(
   response => {
    resolve(response.data)
   }
  ).catch(error => {
   console.log(error)
   reject(error)
  })
 })
}
getDefaultData=()=>{
 return fetch('/api/getBoardList');
}
export default {
 getDefaultData
}

这样做的好处是集中化的管理了所有的api接口，当我们需要修改接口相关的代码，只需要在api.js中修改，包括路由修改以及路由拦截等，可读性更好；在不同的组件内，我们只需要把对应的接口用解构赋值的思想把它引入对应的组件内即可使用。

import {getDefaultData} from '@/fetch/api.js'