一、安裝并使用iview全局樣式
①安裝

$ npm install view-design --save

②在main.js中全局引入

# main.js
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

...

Vue.use(ViewUI);

③使用iview的 List

    <List>
      <ListItem v-for="(item, index) in bookList">
        <ListItemMeta :avatar="item.cover" :title="item.bookName"  />
      </ListItem>
    </List>

④修改iview的樣式參數(shù)

<style scoped>

>>>.ivu-avatar {
  border-radius: 0% !important;
}

</style>

⑤使用分頁P(yáng)age時(shí)，如果監(jiān)測(cè)不到當(dāng)前頁碼數(shù)時(shí)要考慮.sync修飾符

      <Page :current.sync="currentPage" :total="total" :page-size="8" />

⑥遇到click事件無響應(yīng)，加上native修飾符

        <ListItemMeta :avatar="item.cover" :title="item.bookName" @click.native="currentBookId(item.uniqueId)" />

⑦遇到全局提示Message的error方法無法使用的情況
將ViewUI引入使用

import ViewUI from 'view-design';
·...
      // this.$Message.error(err.response.data.msg)  這樣會(huì)報(bào)錯(cuò)，但是this.$Message.success()方法不會(huì)報(bào)錯(cuò)
      ViewUI.Message.error(err.response.data.msg)

二、在vue項(xiàng)目中打開外部完整鏈接（如打開‘www.baidu.com’）

        window.location.href = res.url

三、數(shù)據(jù)保存到vuex中，但是一刷新頁面，或者有頁面跳轉(zhuǎn)情況，vuex中保存的數(shù)據(jù)會(huì)丟失。此時(shí)可以考慮將數(shù)據(jù)保存到本地session storage中。
即“vuex的store中的數(shù)據(jù)有一個(gè)特性，那就是在頁面刷新時(shí)，頁面會(huì)重新加載vue實(shí)例，store里面的數(shù)據(jù)就會(huì)被重新賦值，這樣就會(huì)出現(xiàn)頁面刷新vuex中的數(shù)據(jù)丟失的問題?！?br> 解決方案之一如下：
安裝插件：

npm install vuex-persistedstate  --save

然后配置store中的index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

export default new Vuex.Store({
  // 安裝插件，將vuex中的數(shù)據(jù)保存到本地session storage中,避免刷新一下vuex中的數(shù)據(jù)就丟失
  plugins: [createPersistedState({
    storage: window.sessionStorage
  })],
  state: {
    bookInfo: null
  },
  mutations: {
    setBookInfo(state, book) {
      state.bookInfo = book
    }
  },
  actions: {

  },
  modules: {
  }
})

四、vue跨域問題（繞不過去，還是寫一下吧）
本人用的cli4，遇到了跨域問題，按照面向百度編程的思維方式，試了多種方式，其中可能性最高的一種，同時(shí)也是在github上找的，在項(xiàng)目根目錄創(chuàng)建vue.config.js文件，進(jìn)行如下配置：

# vue.config.js
module.exports = {
  devServer: {
    port: 8081, // 端口號(hào)
    https: false, // https:{type:Boolean}
    open: true, // 配置自動(dòng)啟動(dòng)瀏覽器
    hotOnly: true, // 熱更新
    proxy: {
      // 配置跨域
      '/api': {
        target: 'https://xxxxxx.com',//跨域接口的地址(真實(shí)api地址)
        changeOrigin: true, // 允許跨域
        pathRewrite: {
         '^/api': '/'
         }
      }
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
};

可參考github地址：“https://github.com/staven630/vue-cli4-config/blob/master/vue.config.js”
本以為會(huì)萬事大吉，卻發(fā)現(xiàn)行不通，之后又搞了半天，無果，想著要后端處理一下，然后資訊同事使用如下配置，解決了問題（本彩筆很后悔沒早問同事，浪費(fèi)時(shí)間了）

#vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
        'store': '@/store',
      }
    }
  },
  devServer: {
    port: 8081, // 端口號(hào)
    https: false, // https:{type:Boolean}
    open: true, // 配置自動(dòng)啟動(dòng)瀏覽器
    hotOnly: true, // 熱更新
    proxy: {
      // 配置跨域
      '/api': {
        target: 'https://xxxx',//跨域接口的地址
        changeOrigin: true, // 跨域
        source: false  // 主要問題（重點(diǎn)），
      }
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
};

請(qǐng)求配置如下：

# axios or request.js
import Vue from 'vue';
import axios from 'axios';
import Token from "../common/token";
import Device from "../common/device";


const Axios = axios.create({
  baseURL: '/api',
  timeout: 5000,
});

Vue.config.productionTip = false

// 添加請(qǐng)求攔截器
Axios.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  // headers中增加設(shè)備唯一碼
  const device_uuid = Device.get() || ''
  // console.log(device_uuid)
  if (device_uuid) config.headers['Device-UUID'] = device_uuid;

  // 攜帶cookie
  const token = Token.get() || ''
  // 后臺(tái)token驗(yàn)證
  if (token) config.headers.Authorization = 'Bearer ' + token;
  console.log(config)
  return config;
}, (err) => {
  // 對(duì)請(qǐng)求錯(cuò)誤做些什么
  return Promise.reject(err);
});

// 添加響應(yīng)攔截器
Axios.interceptors.response.use(res => {
  // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
  return res.data;
}, err => {
  // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
  // console.log(err)
  return Promise.reject(err);
});

export default Axios;

五、post請(qǐng)求（用戶登錄）時(shí)數(shù)據(jù)一直請(qǐng)求不成功（囧），后端只返回狀態(tài)碼400，有效信息太少，后來發(fā)現(xiàn)請(qǐng)求時(shí)的參數(shù)data被轉(zhuǎn)換成了字符串（啊啊啊啊啊啊啊,md）

image.png

解決方法：
使用qs插件···先安裝

npm install qs

配置：main.js中全局引入

import  qs from 'qs'
....
// qs
Vue.prototype.$qs = qs

使用

# user.js
import qs from 'qs'

const params = qs.stringify({
    username,
    password
  })

此時(shí)的data變成這樣：

image.png

注：
qs.stringify()是將對(duì)象 序列化成URL的形式，以&進(jìn)行拼接。
qs.parse()是將URL解析成對(duì)象的形式。

附上一些基礎(chǔ)知識(shí)：

1、事件總線$bus,可用于兄弟組件傳值
用法：
main.js聲明

# main.js

Vue.prototype.$bus = new Vue()

使用
兄弟發(fā)送事件+數(shù)據(jù)

      this.$bus.$emit("event", column_id);

接收：

  mounted() {
    // 接收兄弟傳來的事件總線
    this.$bus.$on("event", (res) => {
      console.log(res);
    });
  },

2、獲取左滾動(dòng)距離單位
頁面

<div class="column" ref="second">
</div>

獲取

 console.log("左：", this.$refs.second.scrollLeft);