# 本组件库是二次封装,所以依赖一些其他库,需要安装以下库:
"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缓存,删除项目目录的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
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'