18-组件化开发 根组件

组件化开发 & 根组件: 

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

            好处:便于维护，利于复用->提升开发效率

            组件分类: 普通组件 , 根组件

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

 

 App.vue文件(单文件组件) 的三个组成部分:

1. 语法高亮插件

2. 三部分组成 

        * template: 结构(有且只能一个根元素)

        * script: js逻辑

        * style: 样式(可支持less,需要装包)

3. 让组件支持less

        1.  style标签，lang="less" 开启less功能

        2.  装包: yarn add less less-loader 或 npm i less less-loader --save

<template><div class="App"><div class="box" @click="fn"></div></div>
</template><script>
// 导出的是当前组件的配置项
// 里面可以提供: data methods computed watch 生命周期八大钩子
export default {created() {console.log("我是created")},methods: {fn() {alert("你好")}}}
</script><style lang="less">
/* 让style支持less1. 给 style加上 lang="less"2. 安装依赖包 less less-loadernpm i less less-loader -D (开发依赖:只在开发时使用)
*/
.App {width: 400px;height: 400px;background-color: pink;.box {width: 100px;height: 100px;background-color: skyblue;}
}
</style>