在 webstorm 下，vue-cli3.0 創(chuàng)建的項(xiàng)目，其中 eslint 和 webstorm 的格式化代碼沖突問題

// 代碼 App.vue
<script>
  export default {   // 報(bào)錯(cuò)：Expected indentation of 0 spaces but found 2  
    name: 'App'      // 報(bào)錯(cuò)：Expected indentation of 2 spaces but found 4  
  }                  // 報(bào)錯(cuò)：Expected indentation of 0 spaces but found 2  
</script>

這種地方，eslint 會要求頂頭寫，但是 webstorm 會加一行縮進(jìn)，按照網(wǎng)上說去改 webstorm 格式化代碼的設(shè)置，其實(shí) webstorm 本身設(shè)置是沒啥問題的，對著個(gè)問題起作用的其實(shí)是 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 模式下刷新時(shí)的404問題（2017-11-8）

由于是單頁面應(yīng)用，我們的頁面只有一個(gè)index.html，在應(yīng)用內(nèi)跳轉(zhuǎn)時(shí)路徑都是通過js的API模擬出來的，而刷新時(shí)服務(wù)器會去按照路徑找文件，找不到就報(bào)了404，這是個(gè)后臺問題，大致思路就是后臺配置 把請求都重定向到index.html頁面的同時(shí)不改變 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組件內(nèi)調(diào)用

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

Vue官方api
segmentfault——關(guān)于vue中$emit事件問題

關(guān)于頁面間通訊，回調(diào)多次觸發(fā)，可以參考
vue中eventbus被多次觸發(fā)（vue中使用eventbus踩過的坑）

Axios 發(fā)送 options 請求 403（2017-9-28）

解決方法：
1.服務(wù)器端支持 options
2.使用 URLSearchParams 裝 post 用的參數(shù)（兼容性極差）
3.使用 qs 庫來對數(shù)據(jù)進(jìn)行編碼

// 使用 URLSearchParams 裝 post 用的參數(shù)（兼容性極差）
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');

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

URLSearchParams參考資料

// 使用 `qs` 庫來對數(shù)據(jù)進(jìn)行編碼（推薦）
// var qs = require('qs');
import qs from 'qs'

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

axios文檔

template 有時(shí)會使 element-ui 的 el-form-item 的驗(yàn)證失效

以下代碼中某一個(gè) el-form-item 會驗(yàn)證失效

<template v-else>
          <el-form-item label="起拍價(jià)" prop="gstartingprice">
            <el-input v-model.number="goodsForm.gstartingprice" type="number"></el-input>
          </el-form-item>
          <el-form-item label="拍賣時(shí)間" prop="gTimes">
            <el-date-picker
              v-model="goodsForm.gTimes"
              type="datetimerange"
              :picker-options="timePickerOptions"
              range-separator="至"
              start-placeholder="開始日期"
              end-placeholder="結(jié)束日期"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="加價(jià)幅度" 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>