iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 7
2
Modern Web

用Vue實作一個LINE@聊天機器人後台系列 第 7

[Day07] 番外篇: 三個前端開發實用小工具

Lorem Picsum:假圖產生器

切板時有時會遇到設計師還沒有提供上稿圖片的狀況,這時候假圖/隨機圖產生器就很重要了。

Lorem Picsum:假圖產生器
https://picsum.photos/

使用方法

  • 產生正方形的圖片

正方形的圖片

<!-- 產生寬高都是200px的圖片 -->
<img src="https://picsum.photos/200">
  • 產生長方形的圖片

長方形的圖片

<!-- 產生寬:300px 高:200px的圖片 -->
<img src="https://picsum.photos/300/200">
  • 在url代入不同random參數,產生不同圖片

random的圖片 random的圖片 random的圖片

<img src="https://picsum.photos/80?random=1">
<img src="https://picsum.photos/80?random=2">
<img src="https://picsum.photos/80?random=3">
<!-- 下略 -->
  • 在url代入不同參數,也可以使用v-for迴圈產出
<div class="avatar"  v-for="item in [1,2,3,4,5,6,7,8]">
    <el-avatar :size="60" :src="'https://picsum.photos/60?random'+item"></el-avatar>
</div>
  • 如果沒帶random參數,相同的url,在同一次頁面載入中,每一張都會是一樣的

不random的圖片 不random的圖片 不random的圖片

<img src="https://picsum.photos/80">
<img src="https://picsum.photos/80">
<img src="https://picsum.photos/80">
<!-- 下略 -->
  • 透過參數grayscale,可以產生灰階的圖片

灰階的圖片

<img src="https://picsum.photos/300/200?grayscale">
  • 透過參數blur,可以產生模糊濾鏡的圖片

模糊濾鏡的圖片

<img src="https://picsum.photos/300/200/?blur">

Chinese Lorem:VSCode繁體中文假文產生器

當我們在切版前端網頁時,常常會有需要有填充文字內容的時候。此時最方便的就是使用假文產生器了。
值得一提的是,以往都只有英文簡體中文的假文產生器外掛,但前陣子Kevin大寫了一套VSCode 繁體中文假文產生器,讓我們有繁體中文假文產生的需求時,不用再去別的地方複製~

Chinese Lorem:VSCode 繁體中文假文產生器
https://marketplace.visualstudio.com/items?itemName=KevinYang.ctlorem

使用方法

  • html中,輸入關鍵字ctlorem後,按下tab/enter按鍵即可產生出128字的中文假文
  • 範例:
    基本使用
  • 輸入ctlorem+指定字數後,,按下tab/enter按鍵即可產生出指定字數的中文假文:
  • 範例:
    基本使用

blueprint:VSCode從自訂範本產生檔案+目錄的工具

在開發專案時,總是會有需要重複建立一些常用的檔案的時候。為了節省時間、不重複造輪子,可以來學一下這套從自訂範本產生檔案+目錄的工具

blueprint:VSCode從自訂範本產生檔案+目錄的工具
https://marketplace.visualstudio.com/items?itemName=teamchilla.blueprint

使用方法

  • 在想要製作範本的專案的跟目錄,新增一個名為blueprint-templates的資料夾來存放範本們
  • blueprint-templates資料夾中,新增一個範本資料夾,存放你希望將來自動產生的檔案們
    目錄結構
  • 範本中可以使用變數,我的index.html的內容是這樣的:
    index.html
    其中{{name}}的部分將會代入從範本新增檔案時填入的名稱
  • 對希望產生出檔案的目錄按出右鍵選單=>New File from Template
  • 選擇想要使用的範本名稱
  • 輸入name變數
  • 基本使用
  • 可以看到title的部分變為blue-print-test

延伸閱讀

推薦這支影片,介紹很多VSCode的實用工具:

Alex宅幹嘛:開掛囉!!! VSCode 工作學習效率加倍術
https://www.youtube.com/watch?v=QV0Yt279fgc


上一篇
[Day06] 製作一對一聊天頁面(一):聊天室列表
下一篇
[Day08] 製作一對一聊天頁面(二):訊息對話紀錄
系列文
用Vue實作一個LINE@聊天機器人後台30

尚未有邦友留言

立即登入留言