- npm地址
- github源码
(三) button组件开发
目录结构：
button组件相关代码文件的层次结构划分
image.png
考虑按需导入的使用方法
按需导入时，项目中需要安装babel-plugin-import插件
代码语言：javascript复制// Button在项目中按需引入的方式
import {GjfButton} from 'xingorg1-ui';
app.use(GjfButton)基于此，来封装我们的代码
Button组件开发
入口index.js文件
代码语言：javascript复制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文件
重点关键代码如下
代码语言：javascript复制<template>
<div class="gjf-button">
<!-- 类名设置统一为“gjf-”的前缀 -->
<button>按钮</button>
</div>
</template>
<script>
export default {
name: 'GjfButton' // 重点是name命名，用于注册组件时使用name属性，也用于使用组件时标签名带有“gjf-”的前缀，如<gjf-button>
}
</script>组件功能代码
待定，这里先放一个button按钮占位
Button.scss文件
需要搭配后边的全局样式使用
