掉過的Vue的坑坑。。（持續更新）

1. Cannot find module 'stylus'

報錯部分代碼：

控制檯報錯：

CMD報錯：

緣由是缺乏了stylus-loader，須要install：
在CMD中輸入npm install stylus-loader stylus --save-dev：

Done!

2. Do not use 'new' for side effects

代碼以下：

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

報錯：

緣由：刪除了如下注釋。這句注釋能夠繞過規則檢測：

/* eslint-disable no-new */

在new Vue()上方加上句注釋便可：

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

3. Unknown custom element: <router-link> / Unknown custom element: <router-view>

ERROR：

緣由：未將VueRouter注入Vue。加上如下代碼便可：

Vue.use(VueRouter)

4. Cannot read property '_c' of undefined

代碼以下：

// main.js
import Vue from 'vue'
import App from './App'
import hello from './components/hello/hello'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.config.productionTip = false

var router = new VueRouter({
  routes: [
    { path: '/hello', components: hello}
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

<!-- App.vue -->
<template>
  <div>
    <router-link to="/hello">點我點我</router-link>
    <router-view></router-view>
  </div>
</template>

<!-- hello.vue -->
<template>
    <div>
        Hello Vue.js!
    </div>
</template>

其實這個錯誤還是查了挺久的。。後來，猛然發現，這是個低級錯誤，但願看到這裡的朋友不要打我。。。我把main.js里路由設置的component寫成components了。。因此在此提醒各位，引入的組件用的是components，而路由設置用的是component...應該是一個路由路徑對應一個組件。
因此，main.js裏的路由設置改為：

var router = new VueRouter({
  routes: [
    { path: '/hello', component: hello}
  ]
})

Done!

5.vue-resourse請求的數據格式問題

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

// App.vue
const ERR_OK = 0
export default {
  data () {
    return {
      testData: {}
    }
  },
  created () {
    this.$http.get('/text').then((response) => {
      response = response.json()
      console.log(response)
      if (response.errno === ERR_OK) {
        this.testData = response.data
      }
    })
  }
}

控制檯輸出結果以下，為Promise格式，而不是Object對象：

查閱官方文檔：

發現json()獲取到的數據類型是Promise，若是我們想獲得Object，能夠選用body。於是將

response = response.json()

修改為

response = response.body

輸出結果：

Done！

6.使用外部stylus文件，要記得import。。。

我因為漏了這句話，查了半天沒發現錯誤TAT。。。

import './common/stylus/icon.styl'

7.Vue.js transition

<transition name="fade"></transition>

未完待續。。。