vue designer

VUE設計師

VUE組件設計工具。

此擴展仍在進行中。如果您對此擴展程序有一些反饋，那真的很有幫助！

快速開始

• 下載VSCODE擴展

• 打開命令pallete，然後選擇Open Vue Designer 。然後，您可以看到當前打開的單個文件組件（ .vue ）的預覽窗格。

設定

vueDesigner.sharedStyles

預覽中將加載的CSS路徑數組。當您的應用程序具有重置CSS等全局CS時，這很有用。

{
  "vueDesigner.sharedStyles" : [ " reset.css " ]
}

請注意，它不支持已加載的CSS中的@import 。您需要根據CSS文件指定所有。

支持的預處理器

Vue Designer當前並不積極支持<template> ， <script>和<style>塊上的預處理器。以下列表中未包含的語言可能對Vue Designer不起作用。

• html（ <template> ）
• JavaScript（ <script> ）
• 打字稿（ <script lang="ts"> ）
• CSS（ <style> >）

發展

Vue Designer由兩個模塊 - 服務器和客戶端分開。

服務器由編輯器流程執行，負責解析/分析組件代碼和處理客戶端請求。客戶端用於渲染組合預覽和處理用戶的交互。服務器和客戶端通過Websocket通信，以同步組件數據。

服務器代碼以打字稿編寫，並將其編譯為Commonjs格式，而客戶端代碼也在打字稿中，但被Vite捆綁在一起。

僅適用於客戶端的代碼應在src/view中。

所有代碼均應由漂亮的格式。

對於不存在的外部軟件包的鍵入，應該在types/(package name)中。

視覺工作室代碼擴展

要在VSCODE上進行調試，請執行以下步驟：

1. 運行yarn watch以啟動開發服務器。
2. 打開Vscode並在編輯器左側顯示Debug Pane。
3. 運行Launch Extension ，以便通過啟用本地VUE設計師打開一個新窗口。
4. 在命令pallete上選擇Open Vue Designer 。

如果要使用開發工具作為客戶端代碼，請使用開發人員：command pallete上的開發人員工具命令。

命令

 # build sources
$ yarn build

# build and watch sources
$ yarn watch

# run test
$ yarn test

# format sources with prettier
$ yarn format

發布

$ npm version XXX # -> update version & generate changelog

# after edit changelog if needed
$ git add CHANGELOG.md
$ git commit -m " docs: changelog vXXX "

$ vsce publish