目录

一.组件化

二.根组件

三.App.vue文件（单文件组件）的三个组成部分

四.普通组件的注册和使用：

        1.普通组件的创建

        2.局部注册

        3.全局注册

🧠 补充小技巧：

💡 关于组件名（第一个参数）：

---

一.组件化

        一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

        好处：便于维护，利于复用→提升开发效率

        组件分类：普通组件、根组件

二.根组件

        整个应用最上层的组件，包裹所有普通小组件

三.App.vue文件（单文件组件）的三个组成部分

        在VScode中安装了vetur的情况下在.vue空白文件中，输入vue然后回车就可以直接生成这三个结构

        1.template：结构（在vue2中一个组件页面的结构中有且只能有一个根元素）。

        2.script：js逻辑。

        3.style：样式（可支持less，需要包）默认样式是会影响全局的，使用scoped可以只限定在当前组件页面中。

        4.让组件支持less         

                使用前需要先安装less包

yarn add less less-loader     

       

四.普通组件的注册和使用：

        1.普通组件的创建

        下面这种情况是错误的，Vue2中有且只能有一个根元素，这个问题在Vue3中被解决

        2.局部注册

                只能在注册的组件中使用

                在导入组件后，不使用是会报错的。

        3.全局注册

                所有组件内都能使用

部分	含义
'HelloWorld'（字符串）	👉 组件名（Component Name）用来在模板中写成 <HelloWorld> 标签使用
HelloWorld（变量）	👉 组件对象（Component Object）通常是 import HelloWorld from './components/HelloWorld.vue' 进来的

🧠 补充小技巧：

💡 关于组件名（第一个参数）：

• 推荐使用 多单词（multi-word）命名，避免与 HTML 原生标签冲突（比如 Button, Form 等）

• 可以使用 kebab-case 书写（在 HTML 中自动转小写）：

  Vue.component('hello-world', HelloWorld)
  

  这样 <hello-world /> 也是合法的用法。