vue学习笔记（2）——基础设置

github
vue学习笔记（1）主要介绍vue项目的创建
vue学习笔记（3）主要介绍vue的router简单用法
对于一个项目而言，会有自己的一套颜色体系，这个时候会在src文件夹下创建一个styles，来存放我们的一些对于样式的基本设置，我在项目中使用scss来编写html样式，有层次感并且上手简单。
创建base.color.scss文件，

$primaryColor: #3f51b5;
$accentColor: #9e9e9e;
$secondaryTextColor: #757575;
...

该文件中定义了一些列的颜色，方便在项目中进行使用，但是这样还使用不了这个文件，首先需要在项目根目录下创建vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass:{
        data: `@import "@/styles/base.color.scss";`
      }
    }
  }
}

这样我们就可以使用base.color.scss中定义的变量了。
当然对于整个vue项目来说，只是设置颜色是不够的，我们很多时候会使用到axios来和后台进行数据交互，这个时候如果我们在每个需要调用axios中进行使用，未免显得有些复杂和冗余，这里我们可以将其简单的封装一下。

• 在src文件夹下创建api文件夹，然后创建index.js文件，
  1、首先引入axios

import axios from 'axios'
import Qs from 'qs'

首先确保安装了axios和qs库，如果没有安装，请执行以下命令安装。

npm install -s axios
npm install -s qs

首先axios是一个封装了比较完美的vue的http请求的库，然后qs可以对参数进行格式化参数。
2、然后进行axios基础设置

# 设置axios默认携带cookies
axios.defaults.withCredentials = true
const http = axios.create({
  baseURL: baseURL, #需要请求地址的url
  headers: {
    Accept: 'application/json',
    'Content-type': 'application/json'
  },
  paramsSerializer: (params) => {
    return Qs.stringify(params, {indices: true})
  }
})

这样我们就设置好了一个基本的axios参数
然后进行封装

export const api = {
  fetch: (path, params) => http.get(path, {params}).then(res => res.data),
  post: (path, data, params) => http.post(path, data, {params}).then(res => res.data),
  download: (url, method, data, params) => http.request({url, method, data, params, responseType: 'blob'})
}

这样一个简单的api封装也就完成了，其实我这里少了个axios拦截器的相关设置，到时候需要的时候，我再进行设置。
index.js文件已经创建完毕，需要进行绑定。

• 将api绑定到vue实例上
  在main.js中进行设置

import Vue from 'vue'
import {api} from '@/api'

Vue.prototype.$api = api

经过这样的设置后，我们就可以在页面上随心所欲的使用了。

this.$api.fetch('list', {
  page: 2,
  limit: 10
}).then(data => {
  # 数据处理逻辑
})

当然在dev环境下，有的时候我们需要调用后台接口，这个时候如果直接访问会出现405错误警告，这个时候首先需要在sever设置跨域问题，然后在vue.config.js中进行设置服务器代理。

devServer:{
  proxy: {
    '/api': { #接口前缀匹配
      target: 'http:0.0.0.0:8000', #服务器目标地址
      wx: true,
      changeOrigin: true
    }
  }
}

这样我们就可以在本地进行安心的调试了。
今天就先这么多，希望您能理解，对于有问题的地方希望指出。