vue組件引入不成功

用vue-cli做項目時，我把GoodList.vue組件里的js和css提出來，然后再在GoodList.vue中引入。
結構如下

但是在引入header組件時，報如下錯誤

我把js文件放回GoodList.vue的原來位置，是成功的，有沒有什么辦法解決

GoodList.vue內容如下

<template lang="html">
  <div>
    <Headervue></Headervue>
  </div>
</template>

<script>
  import Headervue from '@/components/header/Header.vue'
  import GoodList from './GoodList'
  export default GoodList
</script>

<style lang="scss">
  @import "./GoodList";
</style>

GoodList.js內容如下

export default {
  data () {
    return {
      goods: []
    }
  },
  components: {
    Headervue
  },
  mounted () {
    this.getGoodList()
  },
  methods: {
    getGoodList () {
      this.$http.get('/v1/goods').then(res => {
        res = res.body
        if (res.status === 0) {
          this.goods = res.result.list
        }
      }, res => {
      })
    }
  }
}

回答

編輯回答

笑忘初

data{
。。。。
},
從你代碼和報錯看你是沒有使用該組件 ///
把下面代碼加上去
components: {
Headervue
},

2018年2月2日 06:14

編輯回答

澐染

This is not a standard syntax, follow the instructions to modify it gmail login

2018年1月11日 16:41

編輯回答

別硬撐

報這個錯誤是說你的提取出來的js文件中沒有引入import Headervue from '@/components/header/Header.vue'，

解決辦法就是把
import Headervue from '@/components/header/Header.vue'，引入js文件中。
或者是：
把js中的
components: {

Headervue

},組件放到GoodList.vue中

2018年6月23日 13:20

編輯回答

怣人

這個是eslint的語法不規(guī)范，按照提示修改就可以

2017年12月24日 08:57

編輯回答

瘋浪

這樣寫是不行的，Headervue是一個模塊，GoodList是一個模塊，然后你在外部import Headervue然后在GoodList里用，很明顯報了錯：

'Headervue' is not defined

這樣的話大概可以

<template lang="html">
  <div>
    <Headervue></Headervue>
  </div>
</template>

<script>
  import GoodList from './GoodList'
  export default GoodList
</script>

<style lang="scss">
  @import "./GoodList";
</style>

import Headervue from '@/components/header/Header.vue'
export default {
  data () {
    return {
      goods: []
    }
  },
  components: {
    Headervue
  },
  mounted () {
    this.getGoodList()
  },
  methods: {
    getGoodList () {
      this.$http.get('/v1/goods').then(res => {
        res = res.body
        if (res.status === 0) {
          this.goods = res.result.list
        }
      }, res => {
      })
    }
  }
}

2018年6月6日 01:37