前言

还在学习vue2+js的时候我就已经有了想写一个组件库的idea了，且最终写实现了大部分组件: lastertd/sss-ui: 基于vue2开发的基组件库 (github.com)

但有一个比较让人头疼的问题:类型提示。比如我一个按钮组件的type属性，我可能忘了type属性可允许的取值，只用js写的话，做不到给编译器提示。而正好开始ts和用vue3来开发一个带类型提示的组件库了，项目地址:lastertd/sss-ui-plus: 适用于vue3的组件库 (github.com)

项目初始化

首先是项目结构

sss-ui-plus
├─ node_modules  //项目依赖包
├─ examples    //项目测试文件夹
│    ├─ App.vue
│    └─ main.ts
├─ packages    //组件存放处
│    └─ index.ts  //用于导出所有组件
├─ src     //项目需要用到的一些资源
│    ├─ hooks   //hook函数
│    ├─ styles  //全局样式variables.less, global.less, animation.less
│    ├─ types  //自定义的类型，接口等
│    └─ utils  //工具包，工具功能进行分类
├─ README.md
├─ package-lock.json
├─ package.json
├─ index.html
├─ installer.ts   //用于注册组件
├─ index.ts  //项目的入口文件 用于导出
├─ global.d.ts    //用于拓展volar中的全局组件，提供编译器组件提示
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts

examples

主要用于测试编写好的组件.

App.vue

<template>  
  
</template>  
  
<script setup lang="ts">  
  
</script>  
  
<style lang="less">  
#app {  
display: flex;  
flex-flow: column nowrap;  
align-items: center;  
gap: 10px;  
margin-top: 50px;  
color: var(--sss-color-black-dark);  
}  
  
  
</style>

main.ts

import { createApp } from 'vue'  
import packages from "../packages";  
import App from './App.vue'  
  
const app = createApp(App)  
  
app.use(packages)  
  
app.mount('#app')

packages

用于存放编写的组件,每一个组件对应着一个文件夹通过packages->index.ts整体导出

index.ts

import type { Component, App } from 'vue';  
/*css引入 特别注意全局样式最先引入*/  
import "../src/styles/animate.css"  
import "../src/styles/variable.less"  
import "../src/styles/global.less"  
  
 /* 这里是我已经写好的组件  */
import SButton from "./SButton";  
import SInput from "./SInput";  
import SIcon from "./SIcon";  
import SLink from "./SLink";  
import SConfirm from "./SConfirm";  
  
  
  
const components: {  
[propName: string]: Component;  
} = {  
SButton,  
SIcon,  
SInput,  
SLink,  
SConfirm  
};  
  
  
//统一导出
const install = function (Vue:App):void {  
for (const key in components) {  
Vue.component(key, components[key]);  
}  
}  
  
//分别导出
export {  
components  
}  
  
export default install

end

现在单单是完成项目的初始化工作，接下来将会说说src里面的一些资源文件。感谢阅读到最后💟

实现一个vue3组件库-项目初始化

前言