身為前端工程師
你有想過用

做簡報嗎？

WINNIE WU

身為前端工程師
你有想過用

做簡報嗎？

WINNIE WU

Winnie Wu

Frontend Developer

主要以 Vue 開發

喜歡研究動態的東西

回歸正題

✌️😃✌️

而且還連續做了30天

影片教學

UNOCSS

VueUse

安裝 Slidev

提醒: Slidev 需要 Node.js >=18.0 以上

npm

 npm init slidev@latest
 npm init slidev@latest

yarn

yarn create slidev
yarn create slidev

pnpm

pnpm create slidev
pnpm create slidev

為什麽 Slidev ?

Components

Arrow

<Arrow x1="10" y1="20" x2="100" y2="200" />
<Arrow x1="10" y1="20" x2="100" y2="200" />

自定義 Components

檔案位置

your-slidev/
  ├── ...
  └── components/
      └── Counter.vue
your-slidev/
  ├── ...
  └── components/
      └── Counter.vue

以 Counter 例:


<!--自定義 components -->

<Counter :count="10" />

<!-- 略... -->

<!--自定義 components -->

<Counter :count="10" />

<!-- 略... -->

CODE</>

HeightLight

突顯某部分重要程式碼片段時，可使用 Markdown 中的三個反引號（```）來指定程式碼區塊，同時在後面指定程式碼的語言。


interface Users {
  id: number
  firstName: string
  lastName: string
  role: string
}

//...略

function updateUser(id: number, update: User) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

interface Users {
  id: number
  firstName: string
  lastName: string
  role: string
}

//...略

function updateUser(id: number, update: User) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}

Monaco Editor & Monaco Diff

Animations

v-click

DEMO:

我是點擊第 0 次出現的我是點擊第 0 次出現的

程式碼:


<div class="border my-10 tracking-wide relative">
  <div class="bg-[#f1f1f1] p-2 text-[#696969]" >
    <span v-click="[1,2]">我.. <span class="text-2xl">{{ $clicks }}</span> ..出現的</span>
    <span v-click="2">我是點擊第 <span class="text-2xl">2</span> 次 出現的</span>
    <span class="transition-all ease-linear duration-500" :class="$clicks === 3? 'opacity-100': 'opacity-0'" >...{{ $clicks }}...</span>
  </div>
</div>

<div class="border my-10 tracking-wide relative">
  <div class="bg-[#f1f1f1] p-2 text-[#696969]" >
    <span v-click="[1,2]">我.. <span class="text-2xl">{{ $clicks }}</span> ..出現的</span>
    <span v-click="2">我是點擊第 <span class="text-2xl">2</span> 次 出現的</span>
    <span class="transition-all ease-linear duration-500" :class="$clicks === 3? 'opacity-100': 'opacity-0'" >...{{ $clicks }}...</span>
  </div>
</div>

v-motion

  <img
    v-motion
    :initial="{
      x:-380,  
      opacity: 0
    }"
    :enter="{ 
      x:-160 ,
      y:120,  
      opacity: 1, 
      transition: { delay: 1000, duration: 1000 } 
    }"
    class="top-0 right-0 bottom-0 left-0 absolute"
    :src="elSrc"
  />
  <img
    v-motion
    :initial="{
      x:-380,  
      opacity: 0
    }"
    :enter="{ 
      x:-160 ,
      y:120,  
      opacity: 1, 
      transition: { delay: 1000, duration: 1000 } 
    }"
    class="top-0 right-0 bottom-0 left-0 absolute"
    :src="elSrc"
  />

Recording 🎥

Export 📤

安裝 playwright-chromium

npm i -D playwright-chromium
npm i -D playwright-chromium

PDF

slidev export --with-clicks --output my-pdf-export
slidev export --with-clicks --output my-pdf-export

PNG

slidev export --format png
slidev export --format png

相較其他『簡報工具』優勢

HMR
即時更新

程式碼
HightLight

主題樣式
彈性客製化

最後想跟大家分享 ...

焦慮有一天會變成規律

先做做看就知道了

小小工商

以上，謝謝大家