Vue專案常見問題彙總

Tiff發表於2018-10-18
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;
}
複製程式碼

設定圖示，表頭

下面這張圖片是很常見的，想必大家也會。

Vue專案常見問題彙總

怎麼做呢？

在index.html中新增這一句

<link rel="shortcut icon" href="/static/logo.png" type="image/ico">複製程式碼

便設定了圖示。

表頭設定如下，奉上兩張圖：

Vue專案常見問題彙總

Vue專案常見問題彙總

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-…


相關文章