vue designer

Vue Designer

Vueコンポーネント設計ツール。

この拡張機能はまだ進行中です。この拡張機能のためにいくつかのフィードバックがある場合、それは本当に役立つでしょう！

クイックスタート

• vscode拡張子をダウンロードします

• コマンドPalleteを開き、 Open Vue Designerを選択します。次に、現在開いているシングルファイルコンポーネント（ .vue ）のプレビューペインを見ることができます。

設定

vueDesigner.sharedStyles

プレビューにロードされるCSSパスの配列。アプリケーションにリセットCSSなどのグローバルCSSがある場合に役立ちます。

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

ロードされたCSSで@importまだサポートしていないことに注意してください。 CSSファイルに応じてすべてを指定する必要があります。

サポートされているプリプロセッサ

Vue Designerは現在、 <template> 、 <script> 、 <style>ブロックでプリプロセッサを積極的にサポートしていません。次のリストに含まれていない言語は、VUEデザイナーでは機能しない場合があります。

• HTML（ <template> ）
• JavaScript（ <script> ）
• TypeScript（ <script lang="ts"> ）
• CSS（ <style> ）

発達

VUEデザイナーは、サーバーとクライアントの2つのモジュールで区切られています。

サーバーはエディタープロセスによって実行され、コンポーネントコードの解析/分析とクライアントリクエストの処理で責任があります。クライアントは、コンポーネントのプレビューをレンダリングし、ユーザーのインタラクションを処理するためです。サーバーとクライアントは、コンポーネントデータを同期するためにWebsocketで通信します。

サーバーコードはTypeScriptで記述され、CommonJS形式にコンパイルされ、クライアントコードもTypeScriptに含まれていますが、Viteによってバンドルされています。

クライアントのみのコードはsrc/viewにある必要があります。

すべてのコードは、きれいにフォーマットする必要があります。

存在しない外部パッケージのタイプの場合types/(package name)にある必要があります。

ビジュアルスタジオコード拡張機能

VSCODEでデバッグするには、以下の手順に従ってください。

1. yarn watchを実行して、開発サーバーを開始します。
2. vscodeを開き、エディターの左側にデバッグペインを表示します。
3. Launch Extensionを実行して、ローカルVUEデザイナーを可能にする新しいウィンドウを開くようにします。
4. Command PalleteでOpen Vue Designerを選択します。

クライアントコードにDEVツールを使用する場合は、コマンドPalleteのDeveloper：Toggle Developer Toolsコマンドを使用します。

コマンド

 # 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