vue组件引入不成功

Question

用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 => {
      })
    }
  }
}

Answer 1

这样写是不行的，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 => {
      })
    }
  }
}

Answer 2

这个是eslint的语法不规范，按照提示修改就可以

Answer 3

data{
。。。。
},
从你代码和报错看 你是没有使用该组件 ///
把下面代码加上去
components: {
Headervue
},

Answer 4

报这个错误是说你的提取出来的js文件中没有引入import Headervue from '@/components/header/Header.vue'，

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

Headervue

},组件放到GoodList.vue中