目录
一、组件化
1.1. 组件概述
1.2. 语法高亮插件 编辑
1.3. 组件内部组成
1.4. 让组件支持 less
1.5. 组件注册的两种方式
二、局部注册
2.1. 使用描述
2.2. 脚手架工程变动的核心代码
2.2.1. 工程结构图
2.2.2. App.vue
2.2.3. WzxHeader.vue
2.2.4. WzxMain.vue
2.3. 运行效果图
三、全局注册
3.1. 使用描述
3.2. 脚手架工程变动的核心代码
3.2.1. 工程结构图
3.2.2. main.js
3.2.3. WzxButton.vue
3.3. 运行效果图
一、组件化
1.1. 组件概述
① 组件化:一个页面可以拆分成多个组件,每个组件有着自己独立的结构、样式、行为。
好处:便于维护,利于复用 → 提升开发效率。
组件分类:普通组件、根组件。
② 根组件:整个应用最上层的组件,包裹所有普通小组件
App.vue 文件(单文件组件)的三个组成部分
1.2. 语法高亮插件
1.3. 组件内部组成
组件内部由三部分组成:
template:结构 (有且只能一个根元素)
script: js逻辑
style: 样式 (可支持less,需要装包)
1.4. 让组件支持 less
(1) style标签,lang="less" 开启less功能
(2) 装包: yarn add less less-loader(控制台执行或者系统终端上执行改命令)
<template><!-- Vue2中,此处只能有一个div根结点,Vue3没有这个限制了 --><div id="App"><div class="box"></div></div><!-- 同一层级存在多个div节点会报错 --><!-- <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-loaderyarn add less less-loader -D (开发依赖包)
*/
.App {width: 400px;height: 400px;background-color: pink;
}
.App .box {width: 100px;height: 100px;background-color: skyblue;
}
</style>
1.5. 组件注册的两种方式
1. 局部注册:只能在注册的组件内使用
① 创建 .vue 文件 (三个组成部分)
② 在使用的组件内导入并注册
2. 全局注册:所有组件内都能使用
二、局部注册
2.1. 使用描述
使用:
当成 html 标签使用 `<组件名></组件名>`
注意:
组件名规范 → 大驼峰命名法,如:WzxHeader
2.2. 脚手架工程变动的核心代码
2.2.1. 工程结构图
2.2.2. App.vue
<template><div id="App"><!-- 头部组件 --><WzxHeader></WzxHeader><!-- 主体组件 --><WzxMain></WzxMain><!-- 底部组件 --><WzxFooter></WzxFooter></div>
</template><script>
import WzxHeader from './components/WzxHeader.vue'
import WzxMain from './components/WzxMain.vue'
import WzxFooter from './components/WzxFooter.vue'
export default {components: {// 同名的情况下可以省略,两种写法都可以// 组件名: 组件对象WzxHeader: WzxHeader,WzxMain,WzxFooter}
}
</script><style>
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
.App .box {width: 100px;height: 100px;background-color: skyblue;
}
</style>
2.2.3. WzxHeader.vue
<template><div class="wzx-header">我是wzx-header</div>
</template><script>export default {}
</script><style lang="less">
.wzx-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;
}
</style>
2.2.4. WzxMain.vue
<template><div class="wzx-main">我是wzx-main</div>
</template><script>export default {}
</script><style lang="less">
.wzx-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0 ;
}
</style>
2.2.5. WzxFooter.vue
<template><div class="wzx-main">我是wzx-main</div>
</template><script>export default {}
</script><style lang="less">
.wzx-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0 ;
}
</style>
2.3. 运行效果图
三、全局注册
3.1. 使用描述
所有组件内都能使用
① 创建 .vue 文件 (三个组成部分)
② 在main.js 中进行全局注册
使用:
当成 html 标签使用 `<组件名></组件名>`
注意:
组件名规范 → 大驼峰命名法,如:WzxHeader
技巧:
一般都用局部注册,如果发现确实是通用组件,再定义到全局。比如某个样式的按钮所有页面都在使用。
3.2. 脚手架工程变动的核心代码
3.2.1. 工程结构图
3.2.2. main.js
<template><div id="App"><!-- 头部组件 --><WzxHeader></WzxHeader><!-- 主体组件 --><WzxMain></WzxMain><!-- 底部组件 --><WzxFooter></WzxFooter></div>
</template><script>
// 导入需要注册的组件
import WzxHeader from './components/WzxHeader.vue'
import WzxMain from './components/WzxMain.vue'
import WzxFooter from './components/WzxFooter.vue'
export default {// 局部注册components: {// 同名的情况下可以省略,两种写法都可以// 组件名: 组件对象WzxHeader: WzxHeader,WzxMain,WzxFooter}
}
</script><style>
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
.App .box {width: 100px;height: 100px;background-color: skyblue;
}
</style>
3.2.3. WzxButton.vue
<template><button class="wzx-button">通用按钮</button>
</template><script>export default {}
</script><style lang="less">
.wzx-button {height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;
}
</style>