Vue基础入门- 组件化开发、根组件和普通组件、组件的三大组成部分（结构/样式/逻辑）、组件通信、非父子组件通信、v-model、异步更新、自定义指令、插槽和路由、ESlint代码规范及手动修复

在Vue中，组件化开发是一个核心概念。Vue组件可以进一步细分为根组件和普通组件。

根组件是Vue应用的入口，它是单个页面上的最顶级组件，并且通常会在HTML文件中以<div>标签的形式存在，并且在JavaScript中以Vue实例的形式出现。

普通组件则是根组件下的子组件，可以有多个，并且它们通常会在JavaScript中以对象的形式出现。

一个组件主要由三部分组成：结构、样式和行为。

1. 结构：使用template定义组件的HTML结构。
2. 样式：使用style定义组件的CSS样式。
3. 行为：使用script定义组件的JavaScript行为。

下面是一个简单的根组件和普通组件的例子：

<!-- index.html -->
<div id="app">
  <hello-component></hello-component>
</div>

// main.js
import Vue from 'vue';
import HelloComponent from './components/HelloComponent.vue';
 
// 创建根组件
new Vue({
  el: '#app',
  components: {
    'hello-component': HelloComponent
  }
});

<!-- HelloComponent.vue -->
<template>
  <div>
    <h1>Hello, Vue!</h1>
  </div>
</template>
 
<style>
  h1 {
    color: blue;
  }
</style>
 
<script>
export default {
  // 组件的选项
};
</script>

在这个例子中，我们定义了一个根组件，它挂载到id为app的元素上，并注册了一个名为hello-component的普通组件。普通组件是一个单文件组件，包含了结构、样式和行为。当根组件被Vue实例挂载后，它会渲染<hello-component></hello-component>标签，并最终显示出"Hello, Vue!"的信息。