Vue全家桶的采坑记录

在 webstorm 下，vue-cli3.0 创建的项目，其中 eslint 和 webstorm 的格式化代码冲突问题

// 代码 App.vue
<script>
  export default {   // 报错：Expected indentation of 0 spaces but found 2  
    name: 'App'      // 报错：Expected indentation of 2 spaces but found 4  
  }                  // 报错：Expected indentation of 0 spaces but found 2  
</script>

这种地方，eslint 会要求顶头写，但是 webstorm 会加一行缩进，按照网上说去改 webstorm 格式化代码的设置，其实 webstorm 本身设置是没啥问题的，对着个问题起作用的其实是 eslint 的 plugin

// 安装 eslint 的 html plugin
npm i eslint-plugin-html -D

// 在 .eslintrc.js 文件中的 plugins 下添加 html
module.exports = {
  ....
  // required to lint *.vue files
  plugins: [
    'vue',  // 原来就有
    'html'  // 新增的
  ],
  .....
}

vue-router 使用 history 模式下刷新时的404问题（2017-11-8）

由于是单页面应用，我们的页面只有一个index.html，在应用内跳转时路径都是通过js的API模拟出来的，而刷新时服务器会去按照路径找文件，找不到就报了404，这是个后台问题，大致思路就是后台配置 把请求都重定向到index.html页面的同时不改变 url

参考博客 Apache && nginx
参考博客 Apache && nginx
参考sf回答 tomcat

Vue中的EventBus（2017-10-8）

1.新建bus.js

import Vue from 'vue'

export var bus = new Vue()

2.App.vue里created方法里定义事件

import { bus } from 'bus.js'
// ...
created () {
  bus.$on('tip', (text) => {
    alert(text)
  })
}

3.Test.vue组件内调用

import { bus } from 'bus.js'
 // ...
bus.$emit('tip', '123')

Vue官方api
segmentfault——关于vue中$emit事件问题

关于页面间通讯，回调多次触发，可以参考
vue中eventbus被多次触发（vue中使用eventbus踩过的坑）

Axios 发送 options 请求 403（2017-9-28）

解决方法：
1.服务器端支持 options
2.使用 URLSearchParams 装 post 用的参数（兼容性极差）
3.使用 qs 库来对数据进行编码

// 使用 URLSearchParams 装 post 用的参数（兼容性极差）
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');

axios.post('/foo', params);

URLSearchParams参考资料

// 使用 `qs` 库来对数据进行编码（推荐）
// var qs = require('qs');
import qs from 'qs'

axios.post('/foo', qs.stringify({ 'bar': 123 }));

axios文档

template 有时会使 element-ui 的 el-form-item 的验证失效

以下代码中某一个 el-form-item 会验证失效

<template v-else>
          <el-form-item label="起拍价" prop="gstartingprice">
            <el-input v-model.number="goodsForm.gstartingprice" type="number"></el-input>
          </el-form-item>
          <el-form-item label="拍卖时间" prop="gTimes">
            <el-date-picker
              v-model="goodsForm.gTimes"
              type="datetimerange"
              :picker-options="timePickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="加价幅度" prop="gaddprice">
            <el-input v-model.number="goodsForm.gaddprice" type="number"></el-input>
          </el-form-item>
          <el-form-item label="拍卖保证金" prop="gcollateral">
            <el-input v-model="goodsForm.gcollateral" type="number"></el-input>
          </el-form-item>
        </template>