快捷導(dǎo)航

前端不用跑項目vscode組件效果所見即所得

更新時間：2022年04月26日 09:33:36 作者：「零一」

這篇文章主要為大家介紹了一款不用跑項目的vscode組件所見即所得效果的使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

組件封裝及需求效果

我們在寫需求時都會封裝一些組件，然后會為該組件定義一些 props ，使其跟業(yè)務(wù)分離，變得更通用。寫完組件后需要驗證一下組件的效果，也就需要簡單 mock 一下數(shù)據(jù)傳進(jìn)去，然后跑一下項目看一下

// card/index.tsx  Card 組件 
// 咱先來寫個組件
export default function Card (props) {
  const { name } = props
  return (
    <div>{name}</div>
  )
}

// index.tsx  項目根目錄
// 組件寫好了，找個地方引入一下，傳點(diǎn)數(shù)據(jù)進(jìn)去，免得項目崩了
import Card form 'card'
export default function App () {
  return (
    <Card name="零一" />
  )
}

$ # 跑一下項目，看看剛才寫的組件的效果
$ yarn dev

這套流程，你是不是很熟悉？大家可能都是這么干的，看完效果后還要回過頭去把剛剛不要的測試代碼都刪掉

然而，我找到了一個非常好用的 Vscode 插件大大簡化了這個流程！?。?！

它就是 Preview.js ，一個用于項目中組件實(shí)時預(yù)覽的插件

Preview.js優(yōu)點(diǎn)

支持 React（v16+）、Vue2、Vue3、SolidJS，并即將支持 Preact 和 Svelte
無需啟動項目，直接靜態(tài)預(yù)覽組件效果
自動識別組件
自動生成 props 的 mock 數(shù)據(jù)
實(shí)時刷新，無需瘋狂點(diǎn)保存觸發(fā)
可以針對同一個組件生成多個預(yù)覽，并可快速切換
支持調(diào)整頁面比例，以及切換不同分辨率的設(shè)備
暗黑模式切換
直接搜索項目中的其它組件，快速切換

香不香？我反正已經(jīng)上手使用過了，是真的香！之前我自己也做過組件庫的項目，寫完一個組件，就需要寫一個 example 去看看效果，要是用了這個插件，項目也不用跑，實(shí)時預(yù)覽，該有多爽?。ㄕ陂_發(fā)組件庫的同學(xué)看過來，福利啊）

Preview.js插件的缺點(diǎn)

插件是剛出的，可能會有一些bug，這是難免的
上述優(yōu)點(diǎn)中，6、7、8都是需要付費(fèi)的，不過目前可以白嫖，等會講
待發(fā)現(xiàn)…

但我目前用下來是沒啥問題的

接下來帶大家體驗一下

安裝

直接在 VsCode 的插件市場搜索：Preview.js，安裝即可

安裝插件

然后最好重啟一下 VsCode

emmmm，大多數(shù)同學(xué)應(yīng)該會收到這樣一條報錯信息：

npm 版本過低

因為重啟后的初始化階段，Preview.js 插件會安裝一些依賴包，并且它們最低支持的 npm 版本是 7+，估摸著大部分同學(xué)的 npm 包都是小于 7 的，所以還是建議大家想要使用時切換一下 node 版本，比如用 nvm use 17.5.0，此時的 npm 版本就到了 8+ 了，滿足了需求，此時還需要重啟一次

稍微耐心等待幾秒鐘，等它的依賴包都裝好就ok了

preview.js 依賴包安裝成功