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支持less
  1. 给 style加上 lang="less"
  2. 安装依赖包 less less-loader
    npm i less less-loader -D (开发依赖:只在开发时使用)
*/
.App {
  width: 400px;
  height: 400px;
  background-color: pink;

  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
}
</style>