vue designer

Desainer vue

Alat Desain Komponen Vue.

Ekstensi ini masih dalam proses. Jika Anda memiliki beberapa umpan balik untuk ekstensi ini, itu akan sangat membantu!

Awal yang cepat

• Unduh Ekstensi VScode

• Buka perintah palete dan pilih Open Vue Designer . Kemudian Anda dapat melihat panel pratinjau dari komponen file tunggal yang saat ini dibuka ( .vue ).

Pengaturan

vueDesigner.sharedStyles

Array jalur CSS yang akan dimuat dalam pratinjau. Ini berguna ketika aplikasi Anda memiliki CS global seperti Reset CSS.

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

Perhatikan bahwa itu belum mendukung @import di CSS yang dimuat. Anda perlu menentukan semua file CSS tergantung.

Preprosesor yang didukung

Vue Designer saat ini tidak secara aktif mendukung preprocessor di <template> , <script> dan <style> blok. Bahasa yang tidak termasuk dalam daftar berikut mungkin tidak berfungsi pada desainer Vue.

• Html ( <template> )
• JavaScript ( <script> )
• Naskah ( <script lang="ts"> )
• CSS ( <style> )

Perkembangan

Vue Designer dipisahkan oleh dua modul - server dan klien.

Server dieksekusi oleh proses editor dan bertanggung jawab dengan kode komponen parsing/menganalisis dan menangani permintaan klien. Klien adalah untuk merender pratinjau wawancara dan menangani interaksi pengguna. Server dan klien berkomunikasi dengan WebSocket untuk menyinkronkan data komponen.

Kode server ditulis dalam TypeScript dan dikompilasi untuk format CommonJS saat kode klien juga ada di TypeScript tetapi dibundel oleh vite.

Kode hanya untuk klien harus di src/view .

Semua kode harus diformat oleh yang lebih cantik.

Untuk pengetikan paket eksternal yang tidak ada harus dalam types/(package name) .

Ekstensi Kode Studio Visual

Untuk men -debug di vScode, ikuti langkah -langkah di bawah ini:

1. Jalankan yarn watch untuk memulai Dev Server.
2. Buka vScode dan tunjukkan panel debug di sisi kiri editor.
3. Jalankan Launch Extension sehingga membuka jendela baru dengan memungkinkan perancang vue lokal.
4. Pilih Open Vue Designer pada Palet Perintah.

Jika Anda ingin menggunakan alat dev untuk kode klien, gunakan perintah pengembang: Toggle Tools pengembang pada perintah palete.

Perintah

 # build sources
$ yarn build

# build and watch sources
$ yarn watch

# run test
$ yarn test

# format sources with prettier
$ yarn format

Melepaskan

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

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

$ vsce publish