Unduh vite vue3 lowcode - unduh kode sumber vite vue3 lowcode

vite vue3 lowcode

Kategori lainnya

1.0.0

Unduh

Berdasarkan platform kode rendah Vite2.x + Vue3.x + TypeScript H5

Cina |. Inggris

Saat ini, ini hanyalah template sederhana, dan sistem mekanisme yang lebih lengkap mungkin akan diperkenalkan nanti. Teman yang tertarik dapat menyesuaikannya sesuai dengan kebutuhan mereka. Melalui proyek ini, Anda mungkin akan dihadapkan pada banyak fitur dan gameplay baru yang menarik dari vue3.

PS: 此项目为个人半年以前做的实验性小玩具，使用的都是最新的技术栈，后面由于个人时间问题，没有持续维护和完善，暂时计划于2022年下半年开始对项目进行整体的重构和重新设计，实现一个基本可用的简易低代码平台。感谢关注~

Implementasi rencana:

Cuplikan riwayat operasi
Mendukung pembuatan komponen template vue
Hasilkan pohon kerangka komponen
Menyediakan templat formulir dan daftar umum
v-untuk mengikat sumber data
Jalankan logika khusus di kotak pasir
Aturan penyelesaian kode khusus berdasarkan monaco-editor
Penyaji khusus berdasarkan vue3 createRenderer
Gunakan Skema untuk mendeskripsikan struktur data (karena skema dapat menghasilkan fungsi verifikasi)
(⊙o⊙)…Aku akan melakukannya lagi jika aku memikirkannya~

tampilan berdasarkan model

Dari struktur yang paling sederhana, sistem tampilan berbasis model berisi elemen-elemen berikut:

Model
- Definisikan struktur negara
- Tentukan tindakan
melihat
- Status berlangganan
- tindakan pemicu

Ini adalah mode rendering yang sangat sederhana yang dapat diterapkan pada sebagian besar pemandangan.

Proyek klon

git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
or
git clone --depth=1 https://github.com/buqiyuan/vite-vue3-lowcode.git

 cd vite-vue3-lowcode

pnpm install

berlari

pnpm serve

membangun

pnpm build

tumpukan teknologi

Bahasa pemrograman: TypeScript 4.x + JavaScript
Alat pembuatan: Vite 2.x
Kerangka kerja front-end: Vue 3.x
Alat perutean: Vue Router 4.x
Manajemen negara: Vuex 4.x
Kerangka UI PC: Elemen Plus
Kerangka kerja H5 UI: vant
Prakompilasi CSS: Stylus/Sass/Less
Alat HTTP: Aksio
Alat Git Hook: husky + lint-staged
Spesifikasi kode: EditorConfig + Prettier + ESLint + Panduan Gaya JavaScript Airbnb
Spesifikasi komitmen: Commitizen + Commitlint
Pengujian unit: vue-test-utils + jest + vue-jest + ts-jest
Penerapan otomatis: Tindakan GitHub

Daftar fitur

Tambahkan halaman secara dinamis
Pembuatan komponen drag-and-drop
pekerja layanan + indexeddb mengimplementasikan interaksi front-end tanpa server
Manajemen sumber data (mendukung impor JSON yang angkuh untuk menghasilkan model dan antarmuka data)
Menyediakan fungsi preset
Lebih banyak kemasan komponen
lainnya...

Instruksi sederhana

Saat menggunakan formulir saat ini, Anda perlu meletakkan表单控件yang relevan di dalam表单容器, dan Anda perlu memasukkan按钮ke dalam表单容器, lalu mengatur按钮的type ke表单提交按钮. Lalu klik tombol kirim untuk secara otomatis kumpulkan wadah formulir. Semua bidang dan nilai di dalamnya

Hasilkan properti komponen dengan cepat

 // 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
let propObj = {
  string : ( config ) => `createEditorInputProp( ${ JSON . stringify ( config ) } )` ,
  number : ( config ) => `createEditorInputNumberProp( ${ JSON . stringify ( config ) } )` ,
  boolean : ( config ) => `createEditorSwitchProp( ${ JSON . stringify ( config ) } )` ,
} ;

JSON . stringify (
  $$ ( '#props + table tbody tr' ) . reduce ( ( prev , curr ) => {
    const children = curr . children ;
    const key = children [ 0 ] . textContent . replace ( / -([a-z]) / g , ( all , i ) => i . toUpperCase ( ) ) ;
    const child3Text = children [ 3 ] . textContent ;
    const defaultValue = [ 'true' , 'false' ] . includes ( child3Text )
      ? child3Text
      : `' ${ child3Text == '-' ? '' : child3Text } '` ;
    const value = ( propObj [ children [ 2 ] . textContent ] ?? propObj [ 'string' ] ) ( {
      label : `' ${ children [ 1 ] . textContent } '` ,
      defaultValue ,
    } ) . replaceAll ( '"' , '' ) ;
    prev [ key ] = value ;
    return prev ;
  } , { } ) ,
) . replaceAll ( '"' , '' ) ;

 // 在vant文档中 chrome控制台输入以下代码，快速生成组件事件
JSON . stringify (
  $$ ( '#events + table tbody tr' ) . reduce ( ( prev , curr ) => {
    const children = curr . children ;
    const event = {
      label : children [ 1 ] . textContent ,
      value : children [ 0 ] . textContent ,
    } ;
    return prev . concat ( [ event ] ) ;
  } , [ ] ) ,
)
  . replaceAll ( / (?<!:)"(?!,|}) / g , '' )
  . replace ( / " / g , "'" ) ;