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