简单使用Slidev和PPTist

MasonYyp2025-05-19 21:25

简单使用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: ... vppt
  Scaffolding project in vppt ...
  Done.

√ Install and start it now? ... yes
√ Choose the package manager >> npm

added 644 packages, and audited 645 packages in 51s

192 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> dev
> slidev --open



  ●■▲
  Slidev  v51.7.1

  theme       @slidev/theme-seriph
  css engine  unocss
  entry       D:\1_projects\vscode\vppt\slides.md

  public 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 enable

  shortcuts           > 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