组件库

框架

Vite + Vue3 + TypeScript + Sass + VitePress

包管理工具

pnpm

安装项目依赖

pnpm install

IDE 支持

推荐使用 Visual Studio Code

VSCode 插件

• Vue Language Features (Volar)
• TypeScript Vue Plugin (Volar)
• Prettier
• ESLint
• Stylelint

命令

开发

组件库的开发环境

pnpm develop

打包

库模式打包

pnpm build:lib

Lint with ESLint

# 检查修复
pnpm lint

项目结构

project
├── .husky                          # Husky
├── build                           # 打包
├── dist                            # 打包分析文件
├── development                     # 组件库开发目录
├── lib                             # 打包产物
├── packages                        # 组件库代码
│   ├── assets                      # 组件库scss等公用样式
│   ├── components                  # 组件库组件
│   ├── util                        # 组件库工具
├── site                            # 组件库文档
│   ├── .vitepress                  #
│   ├── components                  # 组件库文档 - 组件
│   ├── guild                       # 组件库文档 - 指南
│   ├── index.md                    # 组件库文档 - 首页
├── typings                         # ts声明文件
├── .eslintignore                   # ESLint 忽略配置
├── .eslintrc.js                    # ESLint 配置
├── .prettierignore                 # Prettier 忽略配置
├── .prettierrc.js                  # Prettier 配置
├── .versionrc.json                 # 版本说明
├── CHANGELOG.md                    # 版本更新记录
├── deploy.sh                       # 自动部署脚本
├── README.md                       # 项目说明
├── package.json                    # 包管理
├── pnpm-lock.yaml                  # pnpm lock
├── pnpm-workspace.yaml             # pnpm workspace
└── tsconfig.json                   # TypeScript 配置

代码提交说明

git add .
pnpm commit

快速开始

pnpm add xqq_ele

完整引入

import { createApp } from "vue";
import ele from "xqq_ele";
import App from "./App.vue";

const app = createApp(App);
app.use(ele);
app.mount("#app");

单独引入

<template>
    <x-card-metrics></x-card-metrics>
</template>
<script>
import { XCardMetrics } from "xqq_ele";
export default {
    components: {
        XCardMetrics
    }
};
</script>

按需加载