vue designer

مصمم VUE

أداة تصميم مكون VUE.

هذا التمديد لا يزال يعمل قيد التقدم. إذا كان لديك بعض التعليقات لهذا الامتداد ، فسيكون ذلك مفيدًا حقًا!

بداية سريعة

• تنزيل تمديد VSCode

• افتح البالتيك وحدد 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 وعرض DEBUG PANE على الجانب الأيسر من المحرر.
3. قم بتشغيل Launch Extension بحيث يفتح نافذة جديدة مع تمكين مصمم Vue المحلي.
4. حدد Open Vue Designer على Command Pallete.

إذا كنت ترغب في استخدام أدوات DEV لرمز العميل ، فاستخدم أمر المطور: 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