🧩 csit-vue3 组件库

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

1. 安装方式

# 使用 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 中写入以下内容：

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

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

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

:::

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

接下来，如果你只希望引入部分组件，比如 CiUpload 和 CiCommonListLayout 和 CiPageHeader，那么需要在 main.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单组件中使用某个组件

<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. 安装插件

npm install -D unplugin-vue-components

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

// 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. 示例组件使用

<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 类名、自定义组件名 |