ci-plus

安装本组件库

特别注意：

# 本组件库是二次封装，所以依赖一些其他库，需要安装以下库：
"lodash": "^4.17.21", # 工具库
"less": "^4.2.0", # less库
"sortablejs": "^1.15.1", # 拖拽库
"vite-plugin-svg-icons": "^2.0.1", # svg图标库
"jsbarcode": "^3.11.6", # 条形码库
"dayjs": "^1.11.9", # 日期处理库
"vue-draggable-plus": "^0.4.0", # 拖拽库
"qrcode": "^1.5.3", #二维码库

"vue3-print-nb": "^0.1.4",
"vuedraggable": "^2.24.3",
"qrcode": "^1.5.3",
"@vueuse/core": "^9.13.0"

# 1、安装组件
pnpm install ci-plus -S
# 2、安装element-plus 和引入
pnpm install element-plus@2.5.1  @element-plus/icons-vue@2.3.1 -S
# 3、安装package.json中的其他依赖(到node_modules/ci-plus/package.json目录下，把里面的依赖安装)
# 4、main.ts引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import CiPlus from 'ci-plus'

# 5、全局注册
app.use(ElementPlus)
app.use(CiPlus)

#  本地安装项目
pnpm install 项目package.json所在目录
pnpm install D:\UserData\Public\InternalUse\59529\zjk\ci-plus\packages\components
# 安装npm包
pnpm install ci-plus
# 本库依赖element-plus，需要安装element-plus 图标库
pnpm install element-plus@2.5.1 -S
pnpm install @element-plus/icons-vue@2.3.1 -S
# 发布包
npm publish

如果用pnpm安装组件后出现组件中某个依赖报错说没有默认导出

# 清楚pnpm缓存，删除项目目录的node_modules文件夹
pnpm store prune
# 重新安装
pnpm install

组件库使用说明

# 安装组件
pnpm install ci-plus -S
# 安装element-plus 和引入
pnpm install element-plus@2.5.1  @element-plus/icons-vue@2.3.1 -S

svg图标组件使用说明

1、首先需要安装插件
pnpm i fast-glob@3.x vite-plugin-svg-icons@2.x -D

2、在src/assets/icons中创建svg文件夹，(可将组件库中的assets/icons文件夹移动到项目中的assets/icons文件夹中)

3、在main.ts中引入svg图标
import 'virtual:svg-icons-register'

4、在vite.config.ts中配置svg图标
import path from 'path'
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 配置svg文件存放的文件夹,(可将组件库中的assets/icons文件夹移动到项目中的assets/icons文件夹中)
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // clas命名规则
      symbolId: 'icon-[dir]-[name]'
    }
    )
  ]
})

6、在组件中使用svg图标

<template>
  <div>
    <!-- 单独引入 -->
    <Svgicon icon-class="search" />
    <!-- 全局引入：name就是svg文件的文件名 -->
    <ci-svg-icon name="regular-left" size="20" color="#2C93FF" ></ci-svg-icon>
  </div>
</template>
<script setup>
// 单独引入
import { Svgicon } from '@ci-plus/components'