vite vue3 lowcode
1.0.0
จีน |. อังกฤษ
PS: 此项目为个人半年以前做的实验性小玩具,使用的都是最新的技术栈,后面由于个人时间问题,没有持续维护和完善,暂时计划于2022年下半年开始对项目进行整体的重构和重新设计,实现一个基本可用的简易低代码平台。感谢关注~
จากโครงสร้างที่ง่ายที่สุด ระบบมุมมองที่ขับเคลื่อนด้วยโมเดลประกอบด้วยองค์ประกอบต่อไปนี้:
แบบอย่าง
ดู
นี่เป็นโหมดการเรนเดอร์ที่เรียบง่ายซึ่งสามารถนำไปใช้กับฉากส่วนใหญ่ได้
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
pnpm serve
pnpm build
เมื่อใช้แบบฟอร์มในปัจจุบัน คุณจะต้องใส่表单控件
ที่เกี่ยวข้องไว้ใน表单容器
และคุณต้องใส่按钮
ลงใน表单容器
จากนั้นตั้ง按钮的type
ให้เป็น表单提交按钮
จากนั้นคลิกปุ่มส่งโดยอัตโนมัติ รวบรวมคอนเทนเนอร์แบบฟอร์ม ฟิลด์และค่าทั้งหมดภายใน
// 在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 , "'" ) ;
สำหรับการพัฒนาในพื้นที่ ขอแนะนำให้ใช้เบราว์เซอร์ Chrome 80+
รองรับเบราว์เซอร์รุ่นใหม่ ไม่รองรับ IE
เช่น | ขอบ | ไฟร์ฟอกซ์ | โครเมียม | ซาฟารี |
---|---|---|---|---|
ไม่สนับสนุน | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด |
feat
เพิ่มคุณสมบัติใหม่fix
ปัญหา/ข้อบกพร่องstyle
รูปแบบของโค้ดมีความเกี่ยวข้องและไม่มีผลกระทบต่อผลการรันperf
refactor
revert
แก้ไขtest
การทดสอบที่เกี่ยวข้องdocs
/บันทึกbuild
ทำการเปลี่ยนแปลงกับระบบ build หรือการพึ่งพาภายนอกchore
/การปรับเปลี่ยนการกำหนดค่านั่งร้าน ฯลฯworkflow
ci
types
การเปลี่ยนแปลงไฟล์คำจำกัดความประเภทwip
อยู่ระหว่างการพัฒนา