vueaxios请求封装，vue过滤器和moment日期库的使用，vue组件传值，vue中利用组件方式使用SVG，vue中底部导航栏router-link样式的修改

axios请求接口封装

首先是三个文件

request.js，api.js和env.js文件

request.js：

//引入axios
import axios from "axios"
//设置专属域名
const vipUrl = "/api/app/"
//设置公共域名
const env = require("../http/env")
const Url = env.default.prod.baseUrl
//创建一个axios请求
const service = axios.create({
    baseURL:Url+vipUrl
})
//设置请求拦截
service.interceptors.request.use(
    config => {
        //设置请求头
        config.headers["deviceType"] = "H5";
        console.log("请求数据："config);
        return config;
    },
)

//设置相应拦截
service.interceptors.response.use(
    response =>{
        //根据状态码返回不同处理
        console.log("返回数据",response)
        return response;
    },
)

export default service;

api.js:

import request from './request'

export function banner(){
    return request({
        url: "/banner",
        method: "GET"
    })
}

env.js:

export default {
    //开发环境
    dev: {
      baseUrl: "https://localhost:8080"
    },
    //测试环境
    test: {
      baseUrl: "https://test.365msmk.com"
    },
    //生产环境
    prod: {
      baseUrl: "https://www.365msmk.com"
    }
  };
  

在页面中调用需要引入

  import { banner } from '../http/api';

方法中就是调用banner

    banner({}).then(res=>{
      console.log(res)
    })

如果需要传递参数的话 就在

api.js:

//定义传递的参数params
export function lessonList(params){
    return request({
        url:"courseBasis",
        method:"GET",
        params //在这里进行传参
    })
}

方法中就是调用lessonList

    lessonList({
      page: 1,
      limit: 10
    }).then(res => {
      console.log(res);
    });

以上就是axios的封装

过滤器和moment日期库的使用

过滤器分为全局和局部过滤器

局部过滤器

  filters:{
    ji:function(value){
      return value/10
    }
  },
  
  <div class="teacher_one">{{this.num | ji}}</div>

全局过滤器

在main.js中定义全局的过滤器
Vue.filter('ji', function (value) {
  return value/100;
});

moment日期转化

第一步：

下载

​ npm install moment

第二步：

​ 在需要用的组件中引入

import moment from "moment";

​ 使用方法

     this.num = moment(this.num).format("YYYY年");

vue组件传值

1，父传子

在父组件的子标签上绑定属性

      <tababrone v-for="(item,index) in 5" :key="index" :title="item" />

在组件中利用props接受

export default {
  props: {
    title: {
      type: Number
    }
  }
};

页面直接调用就可以

2，子传夫

父组件
<template>
    <div id="app">
        父组件--{{msg}}
        <!--用on监听派发的事件，定义一个事件名-->
        <o-a v-on:child="showchild"></o-a>
    </div>
</template>

<script>
import oA from '@/test/A'
export default{
    data(){
        return{
            msg:'',
        }
    },
    components:{
        oA
    },
    methods:{
//      定义的事件名放在methods
        showchild(res){
            this.msg = res
        }
    }
}

</script>

<style scoped="scoped">
*{font-size: .5rem;}
</style>

子组件
<template>
    <div id="app">
        子组件--{{name}}
        <button @click="son">子组件</button>
    </div>
</template>

<script>
export default{
    data(){
        return{
            name:'TaylorSwift'
        }
    },
    methods:{
        son(){
//          派发事件,参数
            this.$emit("child",this.name)
        }
    }
}
</script>

<style>
</style>

问题

vue中svg图标失效的问题

今天在 vue首页的tabbar导航栏的切换中 发现自己的svg加载不出来于是上网找到了一种方法

通过 vue-svg-icon 插件实现按需加载

1、安装

npm install vue-svg-icon --save-dev

2、在项目的 main.js 入口引入 vue-svg-icon 以便全局调用：

import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon); 

3、将 svg 图标文件放入 src/svg/

图标文件可以到 iconfont 上下载

4、在组件中按需加载需要的图标

例如 pen.svg 放到了 /src/svg 目录中，在 vue 组件按需加载：

<template> 
  <icon name="pen" scale="1" class="home"></icon> 
</template>

这里可以通过修改 scale 属性值或在使用的页面中修改 svg 样式来调整图标大小

scale来调整大小 class 样式来改变颜色完美解决！

这种方法的svg需要将每个svg下载下来

底部导航栏router-link样式的修改

在有router-link页面 这个是未被选中的

a{
  color:black;
}

然后在routes.js页面new路由对象的时候加入写好的类名即可

 let routerInstance = new Router({
  		//配置激活时要使用的类名	
	    linkActiveClass:'router-link-active',
	    mode: 'history',
	    waitForData: true,
	    transitionOnLoad: true,
	    base: basePath,
	    routes: []
	    })

回到router-link页面内定义router-link-active