組件化開發 & 根組件:?

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>