vue 开发采坑实记

一、安装并使用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的样式参数

<style scoped>

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

</style>

⑤使用分页Page时，如果监测不到当前页码数时要考虑.sync修饰符

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

⑥遇到click事件无响应，加上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)  这样会报错，但是this.$Message.success()方法不会报错
      ViewUI.Message.error(err.response.data.msg)

二、在vue项目中打开外部完整链接（如打开‘www.baidu.com’）

        window.location.href = res.url

三、数据保存到vuex中，但是一刷新页面，或者有页面跳转情况，vuex中保存的数据会丢失。此时可以考虑将数据保存到本地session storage中。
即“vuex的store中的数据有一个特性，那就是在页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值，这样就会出现页面刷新vuex中的数据丢失的问题。”
解决方案之一如下：
安装插件：

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中的数据保存到本地session storage中,避免刷新一下vuex中的数据就丢失
  plugins: [createPersistedState({
    storage: window.sessionStorage
  })],
  state: {
    bookInfo: null
  },
  mutations: {
    setBookInfo(state, book) {
      state.bookInfo = book
    }
  },
  actions: {

  },
  modules: {
  }
})

四、vue跨域问题（绕不过去，还是写一下吧）
本人用的cli4，遇到了跨域问题，按照面向百度编程的思维方式，试了多种方式，其中可能性最高的一种，同时也是在github上找的，在项目根目录创建vue.config.js文件，进行如下配置：

# vue.config.js
module.exports = {
  devServer: {
    port: 8081, // 端口号
    https: false, // https:{type:Boolean}
    open: true, // 配置自动启动浏览器
    hotOnly: true, // 热更新
    proxy: {
      // 配置跨域
      '/api': {
        target: 'https://xxxxxx.com',//跨域接口的地址(真实api地址)
        changeOrigin: true, // 允许跨域
        pathRewrite: {
         '^/api': '/'
         }
      }
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
};

可参考github地址：“https://github.com/staven630/vue-cli4-config/blob/master/vue.config.js”
本以为会万事大吉，却发现行不通，之后又搞了半天，无果，想着要后端处理一下，然后资讯同事使用如下配置，解决了问题（本彩笔很后悔没早问同事，浪费时间了）

#vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
        'store': '@/store',
      }
    }
  },
  devServer: {
    port: 8081, // 端口号
    https: false, // https:{type:Boolean}
    open: true, // 配置自动启动浏览器
    hotOnly: true, // 热更新
    proxy: {
      // 配置跨域
      '/api': {
        target: 'https://xxxx',//跨域接口的地址
        changeOrigin: true, // 跨域
        source: false  // 主要问题（重点），
      }
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
};

请求配置如下：

# 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

// 添加请求拦截器
Axios.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  // headers中增加设备唯一码
  const device_uuid = Device.get() || ''
  // console.log(device_uuid)
  if (device_uuid) config.headers['Device-UUID'] = device_uuid;

  // 携带cookie
  const token = Token.get() || ''
  // 后台token验证
  if (token) config.headers.Authorization = 'Bearer ' + token;
  console.log(config)
  return config;
}, (err) => {
  // 对请求错误做些什么
  return Promise.reject(err);
});

// 添加响应拦截器
Axios.interceptors.response.use(res => {
  // 对响应数据做点什么
  return res.data;
}, err => {
  // 对响应错误做点什么
  // console.log(err)
  return Promise.reject(err);
});

export default Axios;

五、post请求（用户登录）时数据一直请求不成功（囧），后端只返回状态码400，有效信息太少，后来发现请求时的参数data被转换成了字符串（啊啊啊啊啊啊啊,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
  })

此时的data变成这样：

image.png

注：
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接。
qs.parse()是将URL解析成对象的形式。

附上一些基础知识：

1、事件总线$bus,可用于兄弟组件传值
用法：
main.js声明

# main.js

Vue.prototype.$bus = new Vue()

使用
兄弟发送事件+数据

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

接收：

  mounted() {
    // 接收兄弟传来的事件总线
    this.$bus.$on("event", (res) => {
      console.log(res);
    });
  },

2、获取左滚动距离单位
页面

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

获取

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