1. Cannot find module 'stylus'

報錯部分代碼:
clipboard.png

控制台報錯:
clipboard.png

CMD報錯:
clipboard.png

原因是缺少了stylus-loader,需要install:
在CMD中輸入npm install stylus-loader stylus --save-dev:
clipboard.png

Done!

2. Do not use 'new' for side effects

代碼如下:

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

報錯:
clipboard.png

原因:刪除了以下注釋。這句注釋可以繞過規則檢測:

/* 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:
clipboard.png

原因:未將VueRouter注入Vue。加上以下代碼即可:

Vue.use(VueRouter)

4. Cannot read property '_c' of undefined

clipboard.png

代碼如下:

// 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對象:
clipboard.png

查閱官方文檔:
掉过的Vue的坑坑。。(持續更新)-脚本宝典
發現json()獲取到的數據類型是Promise,如果我們想獲得Object,可以選用body。於是將

response = response.json()

修改為

response = response.body

輸出結果:
掉过的Vue的坑坑。。(持續更新)-脚本宝典
Done!

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

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

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

7.Vue.js transition

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

未完待續。。。

本文固定链接: http://www.js-code.com/vue-js/vue-js_25667.html