Skip to content

最新 Vue3 + TS 高仿 ElementPlus 打造自己的组件库

安装

bash
npm i @seam-element --save

开始使用

全局使用

js
// 引入所有组件
import SeamElement from 'seam-element'
// 引入样式
import 'seam-element/dist/style.css'

import App from './App.vue'
// 全局使用
createApp(App).use(SeamElement).mount('#app')
vue
<template>
  <se-button>我是 Button</se-button>
</template>

单个导入

SeamElement 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。

vue
<template>
  <se-button>我是 Button</se-button>
</template>
<script>
import { SeElement } from ' se-element'
export default {
  components: { SeButton },
}
</script>

亮点

Details
  • Vite + Vitest + Vitepress 工具链
  • monorepo 分包管理
  • github actions 实现 CI/CD 自动化部署
  • 大模型辅助:使用大模型辅助完成需求分析,设计思路,快速实现组件,提升开发效率。
  • 当然,也会展示 发布“开箱即用” 的 npm 包