簡單使用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