在VSCode中開發(fā)Vue/React元件時,怎麼即時預覽元件?本篇文章就跟大家分享一個VSCode 中即時預??覽Vue/React元件的插件,希望對大家有幫助!
最近年紀大了喜歡胡思亂想,前段時間突然想到能不能在VS Code中實現(xiàn)組件的所見即所得,於是折騰了兩個月終於做出了能實現(xiàn)這個效果的插件,如圖:
支援即時預覽Webpack/Vite開發(fā)時下的React/Vue元件(Angular應該也能,但我還沒用過,所以沒做支援)。 【推薦學習:《vscode入門教學》】
使用方式
依參考文件安裝並使用外掛程式: https://github.com/jaweii/AutoPreview/blob/main/README-zh.md
然後你就可以寫元件時即時預覽目前元件:
#還可以把可重複使用元件/物料的用例整理在一個預覽專用的檔案裡:
在OUTPUT面板切到AutoPreview來列印偵錯:
斷點功能:emmm...? 我也想有...
把預覽面板拖到底部來預覽比較寬的元件:
實作方式
一開始我只想實作Webpack React的元件預覽的,嘗試了從Webpack配置著手來實現(xiàn),但是發(fā)現(xiàn)這條路走不通,依賴關係太錯綜複雜了,擱置幾天后想到了我以前Vue-Layout項目中組件重新掛載的思路,幾番嘗試後找到實現(xiàn)的關鍵,即透過Webpack和Vite都提供的import api來非同步載入目前視窗檔案路徑的元件,然後重新掛載到預覽窗口,即可實現(xiàn)預覽。
所以其本質上和你為專案新增個路由來顯示當前頁面中的元件一樣,只是插件自動幫你做了。
而因為使用了Webpack和Vite都提供的import api,使用這兩種建置工具開發(fā)時,所有的前端框架理論上都可以實現(xiàn)在VS Code中渲染專案元件實現(xiàn)預覽。
延伸
現(xiàn)在我也只是寫了幾個Demo來測試插件效果,對實際開發(fā)過程中是有增效還是雞肋我也不確定,只是有興趣就做了。
在做的過程中也有一些思考:
如果給可預覽的元件分級,那麼有
- 基礎元件
- 物料(基礎元件、元素、業(yè)務邏輯之間的組合,例如登入框)
- 頁
? ? 這三種層級。
基礎元件
通常在實際專案中,基礎元件是來自內部或第三方元件庫,高重複使用,低耦合,其提供的文件已經能夠預覽元件效果,針對這類元件的IDE內預覽似乎意義並不是很大;
物料
物料則是根據(jù)產品需求對基礎元件、元素、業(yè)務邏輯進行組合的產物,這類物料有的是專案內可重複使用的,有的是專案內沒有重複使用但是跨專案存在重複使用,有的是業(yè)務定製完全不可復用的。
實際專案的協(xié)同中,物料也是最容易被重複寫的,且隨著專案越來越大其會散落在各個內頁,沒有一個展示頁來讓不同開發(fā)者知道哪些物料是已經有了的,就會造成重複造物料。對於這個問題,阿里飛冰、京東JD WORK這樣的開發(fā)鏈工具是一種解決方案,其提供的物料製作、發(fā)布、使用一條龍服務可以很大程度上避免重複造物料,是個重武器。
我想到了個輕武器的方案,即針對物料的IDE內預覽,若合理約定、使用,或許也會是改善重複造物料問題的一個方案。例如約定開發(fā)者對可重複使用的物料匯出預覽,這樣插件可以列出所有可預覽的元件供其他開發(fā)者瀏覽,其他開發(fā)者開發(fā)新物料前,先在預覽清單看看有沒有可重複使用的,如果有直接參考復用或CV定制,沒有再自己寫。
頁面
頁層級則是複用性極低,不過IDE內預覽H5頁面倒也是種不錯的體驗,不用在瀏覽器和編輯器間切換,有點微信開發(fā)者工具的感覺。
----
還有一點看法,如果元件的預覽能夠優(yōu)化開發(fā)體驗,我想並不是因為它能預覽,而是因為其強制組件作者寫預覽函數(shù),預覽組件,天然需要為組件props傳遞mock數(shù)據(jù),而mock的數(shù)據(jù)能為自己和其他開發(fā)者參考和CV,這是其提高程式碼可維護性,降低協(xié)同成本的很重要的原因。
且如果預覽函數(shù)能羅列出元件的多個用例,對於其他開發(fā)者來說是多麼心曠神怡的事:
原文網址:https://juejin.cn/post/7075507907281977352
作者:朱嘉偉
更多關於VSCode的相關知識,請造訪:vscode教學! !
以上是VSCode插件分享:一個即時預覽Vue/React元件的插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undress AI Tool
免費脫衣圖片

Undresser.AI Undress
人工智慧驅動的應用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網頁開發(fā)工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

選擇合適的PHP框架需根據(jù)項目需求綜合考慮:Laravel適合快速開發(fā),提供EloquentORM和Blade模板引擎,便於數(shù)據(jù)庫操作和動態(tài)表單渲染;Symfony更靈活,適合複雜系統(tǒng);CodeIgniter輕量,適用於對性能要求較高的簡單應用。 2.確保AI模型準確性需從高質量數(shù)據(jù)訓練、合理選擇評估指標(如準確率、召回率、F1值)、定期性能評估與模型調優(yōu)入手,並通過單元測試和集成測試保障代碼質量,同時持續(xù)監(jiān)控輸入數(shù)據(jù)以防止數(shù)據(jù)漂移。 3.保護用戶隱私需採取多項措施:對敏感數(shù)據(jù)進行加密存儲(如AES

VSCodeisalightweight,cross-platformcodeeditorwithIDE-likefeaturesviaextensions,idealforwebandopen-sourcedevelopment;2.VisualStudioisafull-featured,Windows-onlyIDEdesignedforcomplex.NET,C ,andenterpriseapplications;3.VSCodeperformsfasteronlower-endma

設計一個既實用又能變現(xiàn)的PHPCRM系統(tǒng),首先要打造包含客戶管理、銷售追蹤、自動化流程等核心功能的MVP,並採用模塊化架構(如Laravel)支持後續(xù)增值功能擴展;2.通過直觀UX設計(如Vue.js前端)降低使用門檻,讓用戶願意持續(xù)付費;3.利用數(shù)據(jù)分析報告(如銷售漏斗、績效分析)幫助客戶提升決策效率,基礎功能免費、高級報告付費實現(xiàn)變現(xiàn);4.實施多租戶架構保障數(shù)據(jù)隔離,為SaaS模式打下基礎,避免後期重構影響商業(yè)化;5.變現(xiàn)不僅靠訂閱費,還可通過API開放、定制開發(fā)、技術支持及插件市場多元獲益

1.PHP電商後臺主流框架有Laravel(開發(fā)快、生態(tài)強)、Symfony(企業(yè)級、結構穩(wěn))、Yii(性能優(yōu)、適合標準化模塊);2.技術棧需搭配MySQL Redis緩存 RabbitMQ/Kafka消息隊列 Nginx PHP-FPM,並考慮前後端分離;3.高並發(fā)架構應分層模塊化、數(shù)據(jù)庫讀寫分離/分庫分錶、用緩存和CDN加速、異步處理任務、負載均衡與Session共享、逐步微服務化並建立監(jiān)控告警體系;4.多元變現(xiàn)路徑包括商品差價或平臺傭金、站內廣告、SaaS訂閱、定制開發(fā)與插件市場、API接

安裝VueI18n:Vue3使用npminstallvue-i18n@next,Vue2使用npminstallvue-i18n;2.在locales目錄下創(chuàng)建語言文件如en.json和es.json,支持嵌套結構;3.在Vue3中通過createI18n創(chuàng)建實例並在main.js中掛載,Vue2中通過Vue.use(VueI18n)並實例化VueI18n;4.模板中使用{{$t('key')}}插值,Vue3CompositionAPI中使用useI18n的t函數(shù),Vue2OptionsAPI

Gotohttps://code.visualstudio.comanddownloadtheWindowsUserInstaller.2.Runthe.exefile,allowchanges,andselectrecommendedoptionsincludingaddingtoPATHandcreatingadesktopshortcut.3.ClickFinishtolaunchVSCodeafterinstallation.4.Optionallyinstallusefulextens

打開VSCode設置,通過Ctrl ,(macOS為Cmd ,)進入設置界面;2.在搜索欄輸入“terminaldefault”,找到“Terminal?Integrated:DefaultProfile”選項;3.從下拉菜單中選擇首選終端,如PowerShell、GitBash、WSL或zsh等;4.若終端未列出,可打開settings.json文件,通過添加terminal.integrated.profiles自定義路徑,例如設置GitBash或zsh;5.修改後關閉現(xiàn)有終端,按Ctrl

tochangetheTsizeInvScode,gotofile>“首選項”>“設置”,搜索“ fontsize”,andmodifythe“ editor:fontsize” value.2
