优化点(路由懒加载、全局 组件/过滤器引用，接口请求数据axio

一、接口请求数据管理
在util下：

第一步：创建：axiosConfig.js基础配置文件

import axios from 'axios'
//引入是路由插件
import router from '../router'
let http = axios.create()
//请求拦截
http.interceptors.request.use(config=>{
    // token失效的时候进行拦截
    return config
})
//响应拦截
http.interceptors.response.use(response=>{
        if(response.data.code == -1){
            router.replace('/login')
        }
    return response
})
export default http

第二步：创建api文件，引入基础配置

import http from './axiosConfig' //引入基础配置
let getData = {} //抛出接口对象
//let baseUrl = "http://localhost:3000"  
//改成代理服务器地址
let baseUrl = "/api"  //这里基础地址
//post的数据请求
import http from './axiosConfig'
let getData = {}
//let baseUrl = "http://localhost:3000"
//改成代理服务器地址let baseUrl = "/api"
//get的数据请求方式
getData.findManger = (data)=>{ 
  return http.get(baseUrl + '/findManage',{ params:data })
}
//post方法
getData.find = (data)=>{ 
  return http.post(baseUrl + '/findManage',data)
}
export default getData

第三步：在页面中进行接口调用

import url from "../../util/api";  //进行页面引入
//调用接口
url.findManger （this.userInfo）   //this.userInfo//传递的数据
.then(res=>{
//res请求回来的数据
}).catch(err=>{
//err错误信息
})

二、路由懒加载引入方式

const Index = () => import('@/components/pages/index')
routes：[
{
        path:'/login',
        compoent:Index,
        children:[]//子集
}，
{  //重定向
    path:'*',
    redirect:'/login'
}
]

main.js中为样式进行重置

//引入重置样式
import './assets/css/reset.css'

三、全局组件和全局过滤器的引用
创建全局组件和全局过滤器组件common/filter文件夹

在文件夹下创建index.js

//引入时间转化过滤器
import toTime from './toTime'
export default {
    toTime
}

toTime.js文件

export default (time) => {
    let date = new Date(parseInt(time))
    let year = date.getFullYear()
    let month = (date.getMonth() + 1 + '').padStart(2, '0')
    let day = (date.getDate() + '').padStart(2, '0')
    return `${year}-${month}-${day}`
}

main.js文件引用

//引入全局过滤器
import comFilter from './filter'
for(let i in comFilter){
  Vue.filter(i,comFilter[i])
}

页面中使用

{{scope.row.time | toTime}}  //过滤器页面使用

在文件夹下创建index.js

import vDel from './del.vue'
export default {
    vDel
}

del.vue文件

<template>
  <div>
    <!--这是组件内的代码，巴拉巴拉一大堆-->
  </div>
</template>
<script>
</script>
<style lang="">
</style>

main.js文件下引入

//引入全局组件
import comComponent from './common'
// console.log(comComponent,'共通的组件')
for(let i in comComponent){
  Vue.component(i,comComponent[i])
}

在页面中使用

<v-del :id="scope.row.id" @del="del"></v-del>