Vue组件的介绍

1.1 组件化开发

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

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

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

1.2 根组件 App.vue

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

1.3 组件的构成

三部分构成

• template：结构 （有且只能一个根元素）
  // template在vue中称为虚拟标签，只起到包括作用，template不会解析到页面上的标签

• script: js逻辑

• style： 样式 (可支持less，需要装包)，默认支持css（css不支持样式嵌套）

• 让组件支持less

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

  （2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D（-D表示开发依赖）

• 让组件支持scss

  （1） style标签，lang="scss" 开启less功能

  （2） 装包: yarn add sass sass-loader -D 或者npm i sass sass-loader -D（-D表示开发依赖）