安装

本节将介绍如何在项目中安装组件库。

好的,我来为您编写一份组件库安装相关的文档内容。以下是建议的内容:

环境要求

• Node.js >= 16.0.0
• Vue >= 3.3.0

使用包管理器

# NPM
npm install @pt/<package-name>

# Yarn
yarn add @pt/<package-name>

# PNPM
pnpm add @pt/<package-name>

组件库依赖以下第三方包，请确保它们已经安装:

# 核心依赖
npm install markdown-it js-base64

# 可选依赖(按需安装)
npm install markdown-it-katex    # 数学公式支持
npm install echarts             # 图表支持
npm install ant-design-vue      # UI 组件支持

或者使用其他包管理器:

# Yarn
yarn add markdown-it js-base64
yarn add markdown-it-katex echarts ant-design-vue   # 可选依赖

# PNPM
pnpm add markdown-it js-base64
pnpm add markdown-it-katex echarts ant-design-vue   # 可选依赖

依赖说明

• markdown-it: Markdown 解析器
• js-base64: Base64 编码/解码工具
• markdown-it-katex: LaTeX 数学公式支持插件 (可选)
• echarts: 图表库支持 (可选)
• ant-design-vue: UI 组件库支持

提示

可选依赖是根据您的使用需求来安装的。例如:

• 如果需要渲染数学公式，请安装 markdown-it-katex
• 如果需要使用图表功能，请安装 echarts
• 如果需要使用 UI 组件，请安装 ant-design-vue

完整引入

在项目的入口文件中(通常是 main.ts 或 main.js)：

import { createApp } from 'vue'
import PotatoUI from '@pt/<package-name>'
import '@pt/<package-name>/dist/style.css'
import App from './App.vue'

const app = createApp(App)

app.use(PotatoUI)
app.mount('#app')

按需引入

我们提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。

<template>
  <pt-button type="primary">按钮</pt-button>
</template>

<script setup lang="ts">
import { PtButton } from '@pt/<package-name>'
import '@pt/<package-name>/dist/button/style.css'
</script>

TypeScript 支持

组件库默认提供了 TypeScript 类型声明文件，无需额外配置即可获得完整的类型提示。

Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.types 指定全局组件类型：

{
  "compilerOptions": {
    // ...
    "types": ["@pt/<package-name>/dist/types"]
  }
}