构建属于自己的vue-ui组件库

创建项目

1. 通过vue命令创建一个vue项目：vue create hq-ui
2. 选择babel以及css预处理器
   由于笔者习惯上使用scss编写css代码，所以添加上了css预处理器，本项目只是作为演示所以没有添加其他依赖，其余例如ts、vuex、vue-router以及测试等读者可以自行添加。此外vue版本可以自行选择，这里笔者选择的是vue3.
   

修改项目目录

1. 将原来的src目录修改为examples
   examples目录作为组件的显示目录，可以和原本的src目录编写规范相同，主要目的是为了显示自己编写的组件。
   注：可以不修改，但是大部分开源的组件库都将src目录修改为了examples，所以笔者这里也修改了。
2. 新建packages目录
   packages目录作为项目组件的存放目录，存放组件的代码以及组件的导出以及安装。
3. 修改vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //若未将src修改未examples则可以不添加该配置
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  //使packages加入配置
  chainWebpack: config => {
    config.module
        .rule('js')
        .include
        .add('/packages')
        .end()
        .use('babel')
        .loader('babel-loader')
  }
})

编写组件

1. 在packages目录下创建Button目录用于存放自定义按钮组件
   Button目录下的结构如下
   
   其中src下存放组件代码，index.js用于导出组件
2. 编写组件代码(index.vue)

<template>
  <div :class="['hq-button','hq-btn-'+props.type]">
    <slot></slot>
  </div>
</template>
//其中由于用了setup语法糖，所以需要再添加一个script结点用于导出该组件的名称
<script>
export default {
  name: "h-button"
}
</script>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: "default",
    validator: value => {
      const types = ["default","primary"]
      return types.includes(value)
    }
  }
})

</script>

<style scoped lang="scss">
.hq-button {
  padding: 0.4rem 1rem;
  margin: 4px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  height: fit-content;
  width: fit-content;
  color: #fff;
  transition: .3s ease;
  user-select: none;
  display: flex;
  align-content: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #99999944;
}

.hq-btn-default {
  color: #000;
}
.hq-btn-default:hover {
  color: #409eff;
  background-color: #e2f1ff;
  border: 1px solid #fff;
}

.hq-btn-primary {
  background-color: #409eff;
  box-shadow: 0 0 2px #409eff;
}

.hq-btn-primary:hover {
  background-color: #1587ff;
}

.hq-btn-success {
  background-color: #67c23a;
  box-shadow: 0 0 2px #67c23a;
}

.hq-btn-success:hover {
  background-color: #53bb18;
}
</style>

3. 添加组件的install方法用于按需导入(index.js)

import HButton from "./src"

HButton.install=Vue=>{
    Vue.component(HButton.name, HButton)
}

export default HButton

4. 添加整个组件库的install方法用于全部导入
   在packages目录下新建index.js文件,添加如下代码，其中笔者已经编写完了三个自定义的组件。每次编写完一个组件只需要在该文件中导入以及添加到组件列表中即可。

import HButton from './Button'
import HBadge from "./Badge"
import HSlider from "./Slider"
// 组件列表
const components = [
    HButton,
    HBadge,
    HSlider
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = Vue=>{
    // 判断是否安装
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    //具体的组件列表
    ...components
}

测试组件

1. 在examples/main.js中导入并使用组件库

import { createApp } from 'vue'
import App from './App.vue'
//HqUI为自定义组件库名称
import HqUI from "../packages"

let app = createApp(App);
//由于暴露了install方法，直接app.use即可使用组件库
//若需要按需导入，使用方法和elementui等组件库相同
//import {HButton} from  "../packages"
//app.use(HButton)
app.use(HqUI)
app.mount('#app')

2. 在页面中使用组件
   由于在main.js中已经导入了所有的组件，所以在App.vue中直接使用即可

<template>
  <h-button type="default">default</h-button>
  <h-button type="primary">primary</h-button>
</template>

<style lang="scss" scoped>
</style>

页面中显示效果如下图所示:

最后

项目整体结构如图所示