css初始化,axios封装

HOME.vue

<template>
  <div class="home">
    <!-- 1.搜索框 -->
    <van-search v-model="svalue" placeholder="请输入搜索关键词" />
    <p>jjjjhafhkfhjak福建奥地利房间爱打开房间啊</p>
  </div>
</template>

<script>
// import axios from "axios";
// 6.2修改引入axios的方法
import axios from '@/request/request'
export default {
  data() {
    return {
      // 1.1补充搜索框中绑定的数据
      svalue: "",
    };
  },
  created() {
    // 6.获取banner图数据
    axios
    // 修改接口的写法,可简写
      // .get('http://kumanxuan1.f3322.net:8001/index/index')
      .get('/index/index')
      .then((res) => {
        // 刷新页面中可查看到res值
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });

      // 6.1封装axios
      // 在src中新建一个request文件夹,在该文件夹中新建一个request.js文件
      // -->request-->request.js文件
  },

  components: {},
};
</script>

request.js

// 1.引入axios 
import axios from 'axios'


// 2.创建axios实例
const instance = axios.create({
    // 3.配置接口地址
    baseURL :'http://kumanxuan1.f3322.net:8001/',
    // 4.设置请求超时时间
    timeout: 5000

})

// 5.请求拦截器,请求之前执行的
instance.interceptors.request.use(config=>{
console.log('执行了请求拦截中的代码');
return config //给后端的东西
},err=>{
    // 有错执行的代码,返回err
    return Promise.reject(err)
})


// 7.设置响应拦截
instance.interceptors.response.use(res=>{
    console.log('相应拦截器执行了');
    return res.data;
},err=>{
    return Promise.reject(err);
})

// 6.将实例开发出去
export default instance

 app.vue

<template>
  <div id="app">
    <router-view></router-view>
   
    
  
  </div>
</template>
<script>
  

export default {
data(){
return{
  
  
}
},
  components: {
   
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  // 2.1设置背景颜色
  background-color: #d8dee4;
  height: 100%;
  min-width: 100%;

}
  // 2.2设置gaodu
html,body{
  height: 100%;
}
// 3.1设置字体
html{
  // 4.2由于添加了清除样式,要提高优先级
  font: size 100px!important;
}
// 3.2文字大小设置为rem的单位
p{
  font-size: .16rem;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
// 4.1清除样式
// npm i reset-css 下载清除样式
// 在main.js文件中引入import 'reset-css'

// 5.安装axios npm i axios -S
    // 在需要使用的页面引入-->Home.vue
    // import axios from 'axios'




// http://codesohigh.com/net163/#/home
// 接口地址：
// 接口文档：http://www.docway.net/project/1Ve70KqViGf/1Ve77eMgO9Y 
</style>

 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/vants'
import 'reset-css'
// 使用css清除可明显看出清除了padding和madding

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')