vue2脚手架组件开发

一、更改App.vue

把脚手架下载下来的App.vue组件的内容改写
此处的2个配置项：

1. name 配置组件在浏览器Vue devtools插件中，组件的名称，
   也就是说组件名虽然是App.vue，但name配置了B，那么浏览器Vue devtools插件中组件名称就是B
   这里以默认App为名，不修改举例

2. data 定义组件数据
   定义数据方式和原始的引入vue.js文件方式没什么区别
   唯一区别在于：组件中的data定义必须以函数方式声明，避免多个组件情况下，同名元素值互相影响
   函数具备作用域，不会互相影响

点击查看代码

<template>
  <div>
    <h1>{{title}}</h1>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return{
      title:'我是App组件'
    }
  },
};
</script>

<style>
</style>

二、创建子组件User.vue

创建子组件User.vue，用于App.vue组件中使用
二者关系是：App.vue是父组件，User.vue组件是子组件
内容如下：

点击查看代码

<template>
  <div>
    <ul>
      <li>姓名：{{ name }}</li>
      <li>性别：{{ sex }}</li>
      <li>爱好：{{ hobby }}</li>
      <li>年龄: {{ age }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "Anbin",
      sex: "男",
      hobby: "sleep",
      age: 18,
    }
  },
};
</script>

<style>
</style>

三、父组件App使用子组件User

总共三步：

1. 导入子组件
2. 注册子组件
3. 使用子组件
   如下：

点击查看代码

<template>
  <div>
    <h1>{{ title }}</h1>
    <!-- 3. 在页面上使用子组件User -->
    <User></User>
  </div>
</template>

<script>
// 1. 引入子组件User.vue,并起名为User
import User from "./components/User.vue";

export default {
  name: "App",
  data() {
    return {
      title: "我是App组件",
    };
  },
  components: {
    // 2. 在父组件App中注册子组件User
    User,
  },
};
</script>

<style>
</style>

四、单个单词的错误解决

此时会报错：error Component name "User" should always be multi-word vue/multi-word-component-names
意思是：错误组件名称“User”应始终为多词vue/多词组件名称
解决思路：vue中组件的命名规范需要以大写字母开头，并且最少以2个单词组成组件名称，这里因为只有1个单词User，所以eslint插件就认为这种写法不符合vue规范，于是编译时产生该报错信息
解决方案：

1. 在 vue.config.js中添加eslint配置项(官方并不建议这样做，因为会把所有组件语法校验都忽略
   lintOnSave: false, // 在vue编译成html时，关闭eslint的语法校验
   
2. 将User改为多个单词，例如UserInfo、UserList等(官方推荐
3. 配置 .eslintrc.js文件忽略个别组件的校验(官方推荐
   在package.json中找到eslintConfig下的rules，进行如下配置：

点击查看代码

// 添加组件命名忽略规则
    "vue/multi-word-component-names": ["error",{
       "ignores": ["Home","User"]  //在这个数组中加入需要忽略的组件名
    }]

五、查看页面效果

可以看到在Vue devtools插件中，Root根组件包含了App组件，App组件包含了User组件