简单使用Slidev和PPTist

简单使用Slidev和PPTist

1 简介

前端PPT制作有很多优秀的工具包，例如：Slidev、revealjs、PPTist等，Slidev对Markdown格式支持较好，适合与大模型结合使用，选哟二次封装；revealjs适合做数据切换，例如常规的走马灯和单页PPT等，PPTist可直接使用和二次封装。PPTist效果不错。

项目地址

# Slidev
https://github.com/slidevjs/slidev# revealjs
https://github.com/hakimel/reveal.js# PPTist
https://github.com/pipipi-pikachu/PPTist

2 Vue使用Slidev

2.1 使用vite创建项目

# vue3官网
https://cn.vuejs.org/
https://vuejs.org/# vite官网
https://cn.vitejs.dev/# 参考地址
https://sli.dev/guide/

安装slidev

npm init slidev@latest

初始化过程如下

工程名：vppt；框架：Vue；

npm init slidev@latest●■▲Slidev Creator  v51.7.1√ Project name: ... vpptScaffolding project in vppt ...Done.√ Install and start it now? ... yes
√ Choose the package manager » npmadded 644 packages, and audited 645 packages in 51s192 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities> dev
> slidev --open●■▲Slidev  v51.7.1theme       @slidev/theme-seriphcss engine  unocssentry       D:\1_projects\vscode\vppt\slides.mdpublic slide show   > http://localhost:3030/presenter mode      > http://localhost:3030/presenter/slides overview     > http://localhost:3030/overview/export slides       > http://localhost:3030/export/remote control      > pass --remote to enableshortcuts           > restart | open | edit | quit

2.2 简单使用

⚠️ 在VS code中可以安装Slidev插件

# 启动Slidev
npm run dev# 编译Slidev
npm run build# 导出Slidev
npm run export

访问地址

http://localhost:3030/1

简单操作

导出PPT

⚠️ 导出的是图片，无法编辑。

3 简单使用PPTist

从Github上下载PPTist，解压（删除后缀"-master"）后按照下面方法初始化。

# 初始化依赖包
npm install# 运行项目
npm run dev

使用页面

AI生成PPT

导出PPT