Vue组件化开发&根组件

组件化：一个页面可以拆分成一个个组件，每个组件有着自己的独立、样式、行为。利于维护，开发，复用

三个部分组成：

template：结构（有且只能有一个根元素）

script：js逻辑

style：样式（可支持less，需要装包）

组件注册使用：：

局部注册：只能在注册的组件内使用

1.创建.vue文件（三个组成部分）

在src文件中的components文件中创建.vue文件

2.在使用的组件内导入并注册

下面是一些操作截图

快速生成结构输入<后回车

生成代码

写一些样式

点击app.Vue，写导入局部注册

在<div id ="app"></div>里面，组件名当成 标签使用即可

组件名规范，大驼峰命名法

局部注册固定使用语法，组件对象就是你导入那个组件根元素的class命名或id命名

​
import 组件名 from '组件存放路径'

​export default{
   // 局部注册
    components:{
    组件名：组件对象
}
}

全局注册：

所以组件内都能使用

1.创建.vue文件（三个组成部分）

在src文件中的components文件中创建.vue文件

2.在main.js中进行全局注册

下面是一些操作截图

在components下新建了个TapButton.vue文件

写好后点击main.js

在main.js中导入后全局注册

Vue.component('组件名',组件对象)

调用组件

这是组件开发的过程，祝你在学前端的路上越来越好