引入组件简单案例

创建vue_01

找到HomeView.vue这个文件，复制粘贴以下代码

<!-- <template></template>类似于html的格式，里面必须🈶内容。 -->
<template>
  <!-- 第一个必须是div，不然会报错 -->
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- 引入组件的第二把钥匙，等同与<HelloWorld></HelloWorld>。msg用来传递值-->
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
//引入组件的第一把钥匙。格式：import 引入组件的名字 from 引入组件的地址。
import HelloWorld from '@/components/HelloWorld.vue'
//export default导出一个模块里面的常量，函数，文件，模块等，export default只能有一个。
export default {
  //这是组件本身的名字，命名必须采用驼峰命名的格式。
  name: 'HomeView',
  components: {
    //对象结构，HelloWorld等同于'HelloWorld':HelloWorld。
    HelloWorld
  }
}
</script>

<!-- style组件，可以用css,scss,less格式。-->
<style scoped lang="scss"></style>
<!-- scoped表示只能在当前使用，可以不用写 -->

找到HomeView.vue这个文件，复制粘贴以下代码 

<template>
  <div class="hello">
    <!-- 把值传给显示页面 -->
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  //这是组件本身的名字，命名必须采用驼峰命名的格式。
  name: 'HelloWorld',
  props: {
    //msg参传的是字符串类型
    msg: String
  }
}
</script>

<style scoped lang="scss">
h1 {
  margin: 40px 0 0;
}
</style>

操作终端

运行结果

新建一个组件

找到AboutView.vue这个文件，复制粘贴以下代码

操作终端

运行结果

新建一个组件

找到AboutView.vue这个文件，复制粘贴以下代码

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
  <NeW></NeW>
</template>

<script>
import NeW from '@/components/NeW.vue'
export default {
  name: 'AboutView',
  components: {
    'NeW':NeW
  }
}
</script>

找到NeW.vue这个文件，复制粘贴以下代码

<template>
    <div>
        这是引入的一个新组件
    </div>
</template>

<script>
export default {
    name: "NeW",
}
</script>

<style lang="scss" scoped></style>

运行结果

vscode报错Already included file name 'xxx' differs from file name 'xxx' only in casing的解决方法

场景：我们创建了一个文件是小写开头的，又改成大写开头的。比如： New.vue  改成 NeW.vue。

原因：缓存的判重逻辑是不区分大小写导致的。在这种情况下，vscode缓存中放的是 New.vue，改了大小写后，vscode试图把 NeW.vue文件放进缓存是，判别到重复了，就会提示错误：Already included file name 'components/New.vue' differs from file name 'components/New.vue' only in casing

解决方法：

1、引入vue文件时去掉后缀.vue。 比如 import NeW from '@/components/NeW.vue'

2、把大小写改回来

3、改成别的名字

4、重启vscode

5、如果还不行，在保持名字不变的情况下：先在vscode中改成别的名字，重启vscode，再改成原来想改的名字。比如：先把RelationDemo.vue 改成 RelationDemo1.vue,重启vscode，再把RelationDemo1.vue 改成 RelationDemo.vue

总结：虽然只是一个小小的问题，可是也会耽误你的一点时间，记录下来，积少成多。努力~！