# 🧩 csit-vue3 组件库

一个基于 Vue 3 + Element Plus 封装的业务组件库，提供统一的 UI 规范和业务逻辑组件，提升团队开发效率。

## 1. 安装方式

```bash
# 使用 npm
npm install csit-vue3

# 或 yarn
yarn add csit-vue3

# 或 pnpm
pnpm add csit-vue3

```

## 2. 快速开始

本节将介绍如何在项目中使用 cist-vue3。

### 2.1. 完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

:::tip

引入 `csit-vue3` 样式的代码，须放置在 `Element Plus` 的样式之后

:::

在 main.ts 中写入以下内容：

```ts
import { createApp } from "vue";
import App from "./App.vue";

// 引入组件库
import CsitVue3 from "csit-vue3";
// 引入 csit-vue3 样式
import "csit-vue3/dist/index.css";

const app = createApp(App);

app.use(CsitVue3);

app.mount("#app");
```

以上代码便完成了 cist-vue3 的引入。需要注意的是，样式文件需要单独引入。

### 2.2. 按需导入

组件库默认支持按需引入，你可以只引入你所需要的组件，而无需引入整个组件库。

:::tip

```ts
// 样式已做按需导入[文档中不对按需导入样式做解释]，但不建议按需导入, 建议 main.ts 中直接全量导入, 清晰且不易出现问题

// main.ts
import "csit-vue3/dist/index.css";
```

:::

#### 2.2.1. 示例: `main.ts`按需导入

接下来，如果你只希望引入部分组件，比如 CiUpload  和 CiCommonListLayout 和 CiPageHeader，那么需要在 main.ts 中写入以下内容：

```ts
// main.ts

import { CiUpload, CiCommonListLayout, CiPageHeader } from 'csit-vue3';

app.component(CiUpload.name, CiUpload);
app.component(CiCommonListLayout.name, CiCommonListLayout);
app.component(CiPageHeader.name, CiPageHeader);
// ...

/* 或写为
 * app.use(CiUpload)
 * app.use(CiCommonListLayout)
 * app.use(CiPageHeader)
 * ...
 */
```

#### 2.2.2. 示例: `.vue`单组件中使用某个组件

```html
<template>
  <CiBlueLineTitle title="自定义标题"></CiBlueLineTitle>
</template>

<script lang="ts" setup>
import  { CiBlueLineTitle }  from 'csit-vue3'
</script>
```

### 2.3. 按需导入（自动导入）【推荐】

csit-vue3 组件库提供一个 unplugin-vue-components 的 Resolver，就像 ElementPlusResolver 一样，支持按名称自动引入组件。

#### 2.3.1. 安装插件

```bash
npm install -D unplugin-vue-components
```

#### 2.3.2. 把`unplugin-vue-components`插件配置到你的 `Vite` 的配置文件中

```ts
// vite.config.ts

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'

// 导出 csit-vue3 解析器
import { CsitComponentResolver } from 'csit-vue3/resolvers'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [CsitComponentResolver()],
    }),
  ],
})
```

## 3. 示例组件使用

```html
<template>
  <CiUpload
    class="demo-page-ci-upload"
    v-model:file-list="fileList"
    :accept="'.jpg,.png,.jpeg,.xls,.xlsx,.doc,.docx,.pdf,.zip'"
    :limit="10"
    :max-size="10 * 1024 * 1024"
    :multiple="true"
  >
  </CiUpload>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const fileList = ref<any[]>([
  {
    fileSize: 1024 * 1024 * 1.3,
    fileKey: 'key-0',
    fileName: 'element-plus-logo-0.svg',
  },
  {
    fileSize: 1024 * 1024 * 1.3,
    fileKey: 'key-0',
    fileName: 'element-plus-logo-0.svg',
  },
])
```

## `番外：`  **常见命名风格比较**

| **风格**   | **示例**           | **常见场景**                             |
| ---------- | ------------------ | ---------------------------------------- |
| camelCase  | ciBlueLineTitle    | JS 变量、函数名                          |
| PascalCase | CiBlueLineTitle    | Vue/React 组件名                         |
| snake_case | ci_blue_line_title | Python变量、文件名、数据库字段           |
| kebab-case | ci-blue-line-title | 文件/文件夹、HTML/CSS 类名、自定义组件名 |
