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

【xingorg1-ui】基于vue3.0从0-1搭建组件库

• • 
    
• ​​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文件

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

越努力，越幸运；阿门。