xqq_ele/README.md

框架

# 组件库

框架

[Vite](https://vitejs.dev/) + [Vue3](https://vuejs.org/) + [TypeScript](https://www.typescriptlang.org/) + [Sass](https://www.w3schools.com/sass/sass_intro.php) + [VitePress](https://vitejs.cn/vitepress/)

包管理工具

[pnpm](https://pnpm.io/)

#### 安装项目依赖

```sh
pnpm install
```

### IDE 支持

推荐使用 [Visual Studio Code](https://code.visualstudio.com/)

#### VSCode 插件

-   [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
-   [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
-   [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-   [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-   [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

## 命令

### 开发

组件库的开发环境

```sh
pnpm develop
```

### 打包

库模式打包

```sh
pnpm build:lib
```

### Lint with [ESLint](https://eslint.org/)

```sh
# 检查修复
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 配置
```

## 代码提交说明

```sh
git add .
pnpm commit
```

## 快速开始

```sh
pnpm add xqq_ele
```

## 完整引入

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

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

## 单独引入

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

## [按需加载](https://xqq_ui.gitee.io/ele/guild/quickstart/loader/)