(三) button组件开发
button组件相关代码文件的层次结构划分
image.png
按需导入时,项目中需要安装babel-plugin-import插件
// Button在项目中按需引入的方式
import {GjfButton} from 'xingorg1-ui';
app.use(GjfButton)
基于此,来封装我们的代码
import GjfButton from './src/button.vue' // 导入组件
import '../../styles/button.scss' // 按需导入单个组件的样式
GjfButton.install = app => {// 组件install属性
app.component(GjfButton.name, GjfButton) // 定义组件-vue3的写法
}
export default GjfButton // 默认导出
重点关键代码如下
<template>
<div class="gjf-button">
<!-- 类名设置统一为“gjf-”的前缀 -->
<button>按钮</button>
</div>
</template>
<script>
export default {
name: 'GjfButton' // 重点是name命名,用于注册组件时使用name属性,也用于使用组件时标签名带有“gjf-”的前缀,如<gjf-button>
}
</script>
待定,这里先放一个button按钮占位
需要搭配后边的全局样式使用