Online presentation application based on Vue3.x + TypeScript. Realize online editing and presentation of PPT slides.
An online presentation application based on Vue3.x + TypeScript, which restores most of the common functions of PPT, supports the 6 most commonly used element types, text, pictures, shapes, lines, charts, and tables, and each element is highly editable Ability, while supporting rich shortcut keys and right-click menus to restore the experience of using local desktop applications as much as possible.
You can do secondary development on it to create your own online presentation application or online design tool (the secondary development document is under preparation).
Online experience address (priority update): https://www.pptist.cn/
If the network status is not good, you can visit the domestic mirror: https://pptist.gitee.io/
Github repository: https://github.com/pipipi-pikachu/PPTist
npm install npm run serve
Q. Why doesn't the xxx shortcut key work?
A. Some shortcut keys need to be focused on the designated area to take effect. For example, the focus is on the thumbnail list on the left to use the shortcut keys of the operation page, and the focus is on the canvas area to use the shortcut keys of the operation element.
Q. Why doesn't paste work?
A. Please pay attention to allow the browser to access the system clipboard.
Q. After the browser is refreshed or reopened, why is there no PPT made before?
A. The demo project is purely front-end deployment and no data will be saved.
Q. How to adjust the order of slide pages?
A. Press and hold the thumbnail on the left to drag to adjust the order.
Q. Why does the operation freeze after inserting a picture?
A. Since this demo project does not rely on the backend, the actual reference to the inserted local image is Base64, which results in a very large data volume. In a real production environment, the image address should be quoted after uploading the image. This will not happen.
Q. Why is there no effect after applying the preset theme?
A. The function of setting a preset theme is to apply the theme style to the newly added elements and pages, which will not take effect on the existing elements and pages (except font colors). You can use the "Apply Theme to All" function to change the current theme Apply to all current pages.
ant-design-vue - UI library
lodash -- Tool Library
prosemirror - Rich text editing frame for rich text editing of text elements
chartist - svg chart library for chart elements
tinycolor2 - Color processing tools
dexie - indexedDB wrapper, used to record historical operations
mitt - Custom event launch/monitor
animate.css - CSS animation library
vuedraggable - Drag and drop plugin based on Vue, used to adjust page order, etc.
crypto-js - Encryption function library, used to encrypt and decrypt clipboard contents
clipboard - Used to copy content to clipboard
icon-park - Icon library
Source Code: https://github.com/pipipi-pikachu/PPTist
Internationalize your Vue project thanks to vue-i18n along with Typescript
Vue 3 with TypeScript .A demo project outlining how to use Vue 3 with TypeScript to build powerful apps.
In this article, we’ll look at how to create Vue.js apps with class-based components. Learn how to use TypeScript to create Vue Apps with Vue Class Components
TypeScript and Vue are a great combination, but how do you use it? In this video I'll discuss how to use TypeScript and Vue with Vue.extend and look at the class component architecture. A Beginners Guide to Vue.js With TypeScript