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 ไม่สนับสนุนตัวประมวล <script> <template> <style> บล็อก ภาษาที่ไม่รวมอยู่ในรายการต่อไปนี้อาจไม่ทำงานกับ Vue Designer

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

การพัฒนา

Vue Designer ถูกคั่นด้วยสองโมดูล - เซิร์ฟเวอร์และไคลเอนต์

เซิร์ฟเวอร์ดำเนินการโดยกระบวนการแก้ไขและรับผิดชอบในการแยกวิเคราะห์/วิเคราะห์รหัสส่วนประกอบและจัดการคำขอไคลเอนต์ ไคลเอนต์มีไว้สำหรับการแสดงผลการแสดงตัวอย่างของคอมไพล์และจัดการการโต้ตอบของผู้ใช้ เซิร์ฟเวอร์และไคลเอนต์สื่อสารโดย WebSocket เพื่อซิงโครไนซ์ข้อมูลส่วนประกอบ

รหัสเซิร์ฟเวอร์ถูกเขียนใน typeScript และรวบรวมเป็นรูปแบบ CommonJS ในขณะที่รหัสไคลเอ็นต์อยู่ใน typeScript ด้วย แต่รวมโดย VITE

รหัสสำหรับไคลเอนต์เท่านั้นควรอยู่ใน src/view

รหัสทั้งหมดควรจัดรูปแบบโดย prettier

สำหรับการพิมพ์แพ็คเกจภายนอกที่ไม่มีอยู่ควรอยู่ใน types/(package name)

ส่วนขยายรหัส Visual Studio

ในการดีบักบน vscode ให้ทำตามขั้นตอนด้านล่าง:

1. เรียกใช้ yarn watch เพื่อเริ่มเซิร์ฟเวอร์ Dev
2. เปิด vScode และแสดงบานหน้าต่างการดีบักที่ด้านซ้ายของตัวแก้ไข
3. เรียกใช้ Launch Extension เพื่อให้เปิดหน้าต่างใหม่ด้วยการเปิดใช้งานนักออกแบบ Vue ในท้องถิ่น
4. เลือก Open Vue Designer บนคำสั่ง Pallete

หากคุณต้องการใช้เครื่องมือ dev สำหรับรหัสไคลเอนต์ให้ใช้ ผู้พัฒนา: สลับคำสั่งเครื่องมือนักพัฒนาซอฟต์แวร์ บนคำสั่ง 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