孔子曰：温故而知新，可以为师矣。

写这篇文章，不为别的，就为了方便大家，方便自己，毕竟还是一名小白，所以把一些重要的东西总结一下，还是比较重要的。

axios封装

像我们做前端的，要调用接口，自然而然得封装一下axios，方便嘛。

import axios from 'axios'import store from '../store'class Axios {  static instance = axios.create({    baseURL: 'http://211.67.177.56:8080',    timeout: 15000  })  static get(url, data, config = {}) {    config.headers= {      'token': store.state.token    }    return new Promise((resolve, reject) => {      this.instance.get(url, {        params: data,        ...config      }      ).then(res => {        resolve(res.data)      })    })  }// config={//   headers:{ 'token': store.state.token}// }  static fetch(url, data, config={}, method) {    config.headers= {      'token': store.state.token    }    return new Promise((resolve, reject) => {      this.instance[method](url, data, config).then(res => {        resolve(res.data)      }).catch(err => {        reject(err)      })    })  }  static put(url, data, config) {    return this.fetch(url,data,config,'put')  }  static post(url, data, config) {    return this.fetch(url,data,config,'post')  }}export default Axios复制代码

以后工作中需要了，拿过来便是。

form表单请求格式

在开发中，我们使用的比较多的HTTP请求方式基本上就是GET、POST。其中GET用于从服务器获取数据，POST主要用于向服务器提交一些表单数据，例如文件上传等。而我们在使用HTTP请求时中遇到的比较麻烦的事情就是构造文件上传的HTTP报文格式，这个格式虽说也比较简单，但也比较容易出错 。

application/x-www-form-urlencoded

浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码。

multipart/form-data

这是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data。

let form = new FormData()form.append('id_card',this.formData.id_card)form.append('password',this.formData.password)console.log(form);this.$axios.post('/hhdj/user/userLogin.do',form).then(res=>{
   复制代码

application/json

现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。

保存登录信息

这是在前端总是遇到的，用户登录之后，保存其token和个人信息，需要

$ npm install vuex-persistedstate复制代码

详细了解可查看：

vuex-persistedstate页面刷新，仍然保存信息。

想起一个知识点，如果安装特定版本的，例如安装：

npm install vue-awesome-swiper --savenpm install vue-awesome-swiper@2.6.7复制代码

import Vue from 'vue'import Vuex from 'vuex'import {Store} from 'vuex'import createPersistedState from 'vuex-persistedstate'Vue.use(Vuex)const store =new Store({  state:{    token: '',    userInfo: null,    loginData: {      isTitle: true,      content: '',      switch: 'one'    }  },  mutations:{    changeTitle(state, type) {      state.loginData = type    },    setUser(state, userinfo) {      state.userInfo = userinfo    },    setToken(state, token) {      state.token = token    }  },  plugins: [    createPersistedState({      storage: {        getItem: key => sessionStorage.getItem(key),        setItem: (key, value) =>          sessionStorage.setItem(key, value),        removeItem: key =>sessionStorage .removeItem(key),      },    }),  ],})export default store复制代码

清除默认样式

做前端免不了要清除默认样式，给大家推荐一个，上github

npm安装一下便可：npm install --save normalize.css

我平时用的是下面这个：

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{  margin: 0;  padding: 0;  border: 0;  font: inherit;  vertical-align: baseline;  /*word-break:break-all;*/  word-wrap:break-word;}input{  white-space:nowrap;}input:-webkit-autofill {  -webkit-box-shadow: 0 0 0px 1000px #fff inset;}*{  background-repeat: no-repeat;  -webkit-tap-highlight-color:rgba(0,0,0,0);}ul,li,ol{  list-style: none;}img{  border: none;  -webkit-tap-highlight-color:rgba(0,0,0,0);}div {  box-sizing: border-box;}html, body{  height: 100%;}.content{  min-height: 100%;}a{  text-decoration: none;  border: none;  outline: none;  tap-highlight-color: rgba(0,0,0,0);  focus-ring-color: rgba(0, 0, 0, 0);  -webkit-tap-highlight-color: rgba(0,0,0,0);  -webkit-focus-ring-color: rgba(0, 0, 0, 0);  -moz-tap-highlight-color: rgba(0,0,0,0);  -moz-focus-ring-color: rgba(0, 0, 0, 0);}a:visited{  color: inherit;}input,button{  outline: none;}.fll {  float: left;}.flr{  float: right;}.clearfix::after {  content: '';  clear: both;  overflow: hidden;  display: block;  width: 0;  height: 0;}复制代码

设置图标，表头

下面这张图片是很常见的，想必大家也会。

怎么做呢？

在index.html中添加这一句

    复制代码

便设置了图标。

表头设置如下，奉上两张图：

MarkDown编辑器

vue移动端

兼容问题

俗话说：没有IE就没有伤害。

最近看到一篇文章，写的特别好，浏览器兼容问题的总结特别全面，在此分享给大家。

rem 适配布局

设备像素比 = 设备物理像素 / 设备独立像素 设备物理像素： 设备上显示的最小单位 设备独立像素： 独立于设备的用于逻辑上衡量像素的单位（css尺寸）。复制代码

就拿iphone6/7/8 做说明iphone6/7/8的物理像素是750，是设备的实际尺寸，而px是是设备独立像素单位，iphone6/7/8是2倍屏，它的css尺寸就是 375， 设备像素比是设备出厂时已经设置好的。

function setRem () {        let htmlRem = document.documentElement.clientWidth        document.documentElement.style.fontSize = htmlRem/7.5 + 'px'      }setRem()复制代码

Token

page size skip这部分知识有待总结