【xingorg1-ui】基于vue3.0从0-1搭建组件库 (三) Button示例组件设计

• npm地址

• github源码

(三) button组件开发

目录结构：

button组件相关代码文件的层次结构划分

image.png

考虑按需导入的使用方法

按需导入时，项目中需要安装babel-plugin-import插件

// Button在项目中按需引入的方式
import {GjfButton} from 'xingorg1-ui';
app.use(GjfButton)

基于此，来封装我们的代码

Button组件开发

入口index.js文件

import GjfButton from './src/button.vue' // 导入组件
import '../../styles/button.scss' // 按需导入单个组件的样式

GjfButton.install = app => {// 组件install属性
  app.component(GjfButton.name, GjfButton) // 定义组件-vue3的写法
}

export default GjfButton // 默认导出

Button.vue文件

重点关键代码如下

<template>
  <div class="gjf-button">
    <!-- 类名设置统一为“gjf-”的前缀 -->
    <button>按钮</button>
  </div>
</template>

<script>
export default {
  name: 'GjfButton' // 重点是name命名，用于注册组件时使用name属性，也用于使用组件时标签名带有“gjf-”的前缀，如<gjf-button>
}
</script>

组件功能代码

待定，这里先放一个button按钮占位

Button.scss文件

需要搭配后边的全局样式使用