快速上手

💡 提示

prd-ai-coms 基于 vue3 + ts + Element-plus 再次封装的基础组件

安装

建议您使用包管理器 (pnpm推荐 ， yarn，npm) 安装 prd-ai-coms。

pnpm

pnpm install prd-ai-coms -S

yarn

yarn add prd-ai-coms

npm

npm install prd-ai-coms    -S

全局使用

前提条件：使用项目必须全局注册 Element-plus 组件库

// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
import "element-plus/theme-chalk/dark/css-vars.css"
import locale from "element-plus/es/locale/lang/zh-cn"
// element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
import TuiPlus from "prd-ai-coms"
import "prd-ai-coms/lib/style.css"
const app = createApp(App)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 注册ElementPlus
app.use(ElementPlus, {
  locale // 语言设置
  // size: Cookies.get('size') || 'medium' // 尺寸设置
})
app.use(TuiPlus)
app.mount("#app")

按需引入

// 在main.js中按下引入
import "prd-ai-coms/lib/style.css"
// 单个.vue文件引入
;<script setup lang="ts">
  import {(TDetail, TForm)} from "prd-ai-coms"
</script>

全部组件如下

组件名称	说明
TPrAiList	管理列表
TPrMarkdown	文档组件
TPrBubble	对话气泡
TPrSender	输入框

prd-ai-coms 组件 Volar 类型提示

// 需要在使用的项目的tsconfig.json文件中添加以下
compilerOptions：{
  "types": [
      "prd-ai-coms/global.d.ts",
    ],
}

如果使用了 markdown 解析可能会有卡顿现象

可以在一个单纯渲染的位置，添加下方代码

import { GetHighLigher } from 'prd-ai-coms'

let md
let highlighter = await new GetHighLigher()
md = md || (await highlighter.initMarkdown())