Vue项目常见问题汇总

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

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

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复制代码

详细了解可查看：github.com/robinvdvleu…

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

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

npm install vue-awesome-swiper --save
npm 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

github.com/necolas/nor…

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中添加这一句

<link rel="shortcut icon" href="/static/logo.png" type="image/ico">复制代码

便设置了图标。

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

MarkDown编辑器

github.com/coinsuper/v…

vue移动端

didi.github.io/cube-ui/#/z…

兼容问题

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

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

juejin.im/post/59a3f2…

rem 适配布局

rem是一个相对于根元素fontSize大小的相对单位，也就是说 1rem 等于 html 的 fontSize 大小， 接下来我们只需要改变html 元素的 fontSize 就可以控制 rem 的大小。接下来我们怎么适配不同的屏幕呢，只要我们做到 屏幕宽度越大 1rem 表示的px值越大及HTML的fontSize值越大，也就是说 HTML的fontSize要于屏幕的宽度成正比。

设备像素比 = 设备物理像素 / 设备独立像素 
设备物理像素： 设备上显示的最小单位 
设备独立像素： 独立于设备的用于逻辑上衡量像素的单位（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()
复制代码

以上代码是以iphone6为设计稿，结果是1rem=100px的实际像素，因为iphone6的设备像素比是2所以1rem在浏览器的预览中是50px，也就是实现了1rem和设备宽度成7.5倍的关系，设备宽度改变1rem的实际大小也会改变，而且在屏幕中的比例是没有变的。如果设计师用的iphone6设计图，则图纸上的width/2/50即得rem值。

Token

Session
async+await
Vuex
React

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

github.com/auth0/node-…

转载于:https://juejin.im/post/5bc7e2a0e51d450ef00bd02c