vue designer

Vue Designer

Инструмент дизайна компонентов VUE.

Это расширение по -прежнему в процессе работы. Если у вас есть некоторые отзывы для этого расширения, это было бы действительно полезно!

Быстрый старт

• Загрузите расширение VSCODE

• Откройте команду Pallete и выберите Open Vue Designer . Затем вы можете увидеть панель предварительного просмотра открытого в настоящее время компонент однофакторного компонента ( .vue ).

Настройки

vueDesigner.sharedStyles

Массив путей CSS, который будет загружен в предварительный просмотр. Это полезно, когда в вашем приложении есть глобальные CSS, такие как сброс CSS.

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

Обратите внимание, что он еще не поддерживает @import в загруженном CSS. Вам нужно указать все в зависимости от файлов CSS.

Поддерживаемые препроцессоры

Vue Designer в настоящее время не активно поддерживает препроцессоры на <template> , <script> и <style> блоки. Языки, не включенные в следующий список, могут не работать на Vue Designer.

• HTML ( <template> )
• JavaScript ( <script> >)
• TypeScript ( <script lang="ts"> )
• CSS ( <style> )

Разработка

Vue Designer отделен двумя модулями - сервером и клиентом.

Сервер выполняется в процессе редактора и отвечает при анализе/анализе кода компонента и обработкой запросов клиентов. Клиент предназначен для предварительного просмотра Compnent и обработки взаимодействия пользователей. Сервер и клиент общаются с помощью WebSocket для синхронизации данных компонентов.

Код сервера записан в TypeScript и составлен в формат CommonJS, в то время как клиент также находится в TypeScript, но связан с VITE.

Коды только для клиента должны быть в src/view .

Все коды должны быть отформатированы красивым.

Для типов внешних пакетов, которых не существует, должны быть в types/(package name) .

Расширение кода Visual Studio

Чтобы отлаживать на VSCODE, выполните следующие шаги:

1. Запустите yarn watch , чтобы запустить Dev Server.
2. Откройте панель отладки VSCODE и показать панель отладки в левой стороне редактора.
3. Запустите Launch Extension так, чтобы он открывал новое окно с включением локального дизайнера VUE.
4. Выберите Open Vue Designer на команде Pallete.

Если вы хотите использовать инструменты DEV для клиентского кода, используйте команду Developer: Toggle Developer Tools в команде 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