vin ui

JD Style Lightweight Vue Component Library รองรับการพัฒนาโปรแกรม Mobile H5 และ Mini

---

Vinui หมายถึงการออกแบบและการใช้งานของ Nutui (ไลบรารีส่วนประกอบมือถือที่มีน้ำหนักเบาสไตล์ JD) และเวอร์ชัน UniApp ที่ใช้งานตามเวอร์ชันไลบรารีส่วนประกอบของ Taro Applet Library Nutui-Vue

การปรับเปลี่ยนและการปรับเปลี่ยนได้ทำกับคุณสมบัติบางอย่างของ UniApp และมีการเพิ่มส่วนประกอบใหม่บางส่วนซึ่งได้ปรับปรุงฟังก์ชั่นของส่วนประกอบบางอย่าง

เริ่มต้น

คุณสามารถอ้างถึงเอกสารประกอบโครงการ: เริ่มต้นอย่างรวดเร็ว

ติดตั้ง

Vinui จัดเตรียมแพ็คเกจ NPM และแพ็คเกจ Uni_Modules เพื่อติดตั้งส่วนประกอบ

วิธีที่ 1: การติดตั้งและการทำงานของ NPM

 # Using npm
npm install @vingogo/uni-ui

# Using yarn
yarn add @vingogo/uni-ui

# Using pnpm
pnpm add @vingogo/uni-ui

วิธีที่ 2: ดาวน์โหลดตลาดปลั๊กอิน UniApp

ที่อยู่ปลั๊กอินตลาด UniApp: https://ext.dcloud.net.cn/plugin?id=11187

วิธีที่ 3: ดาวน์โหลดรหัส

ดาวน์โหลดรหัส Vinui ผ่าน GitHub จากนั้นคัดลอกรหัสแพคเกจไปยังโครงการของคุณเอง:

1. การโคลนรหัสที่เก็บ:

git clone https://github.com/vingogo/vin-ui.git

2. การพึ่งพาการติดตั้ง:

pnpm i

3. ในไดเรกทอรี packages/uni-ui ทำการปรับเปลี่ยนส่วนบุคคลในรหัส Vinui ที่เหมาะสมกับธุรกิจ
4. รหัสบิลด์จะสร้างไฟล์ JS ที่รวบรวมจากไฟล์ TS ต้นฉบับและแปลงเป็น ES2015

pnpm run build:uni

สร้างไฟล์สำหรับการคัดลอกภายใต้ packages/uni-ui/uni_modules

วิธีใช้

1. เพิ่มการกำหนดค่า easycom ใน pages.json :

{
  "easycom" : {
    // 此处根据实际文件位置进行修改，如下为通过 npm 包安装的方式配置
    "^vin-(.*)" : " @vingogo/uni-ui/lib/components/$1/index.vue "
  },
  // 此为本身已有的内容
  "pages" : [
    // ......
  ]
}

2. แนะนำสไตล์

เพิ่มรหัสต่อไปนี้ในไฟล์ทางเข้าโครงการ Main.ts หรือ Main.js ไฟล์:

 import '@vingogo/uni-ui/lib/style.css' ;

3. ใช้ในโครงการ:

< vin-button type="primary">button</ vin-button >

การดำเนินงานโครงการ

ขอแนะนำให้ใช้โครงการ PNPM เพื่อติดตั้งและเรียกใช้และเริ่มโครงการ:

1. การพึ่งพาการติดตั้ง

pnpm i

2. เรียกใช้ H5 หรือ Applet

pnpm run dev

3. เลือกสภาพแวดล้อมเพื่อเรียกใช้ตามตัวเลือกบรรทัดคำสั่งแบบโต้ตอบ
4. เรียกใช้รหัสในเบราว์เซอร์หรือแอปเพล็ตที่ระบุเพื่อเรียกใช้โฟลเดอร์ตัวอย่าง/dist/dev

การสร้างส่วนประกอบ Vinui

• สร้างรหัสเวอร์ชัน NPM:

pnpm run build:lib

หลังจากดำเนินการคำสั่งด้านบนรหัสสำหรับการเผยแพร่ NPM จะถูกสร้างขึ้นภายใต้ packages/uni-ui/lib

• สร้างรหัสเวอร์ชัน Uni_Modules:

pnpm run build:uni

หลังจากดำเนินการคำสั่งข้างต้นรหัสสำหรับการเผยแพร่ตลาด UniApp จะถูกสร้างขึ้นภายใต้ packages/uni-ui/uni_modules

คุณสมบัติ Vinui

• ส่วนประกอบคุณภาพสูง 50+ ครอบคลุมสถานการณ์มือถือกระแสหลัก
• - รองรับธีมที่กำหนดเองแบบไดนามิกและชุดรูปแบบที่กำหนดเองระดับส่วนประกอบ
• ตามข้อกำหนดของ JD Vision
• - รองรับโหมดมืด
• - รองรับชุดของรหัสเพื่อพัฒนาแอปเพล็ต H5+ multi-end ในเวลาเดียวกัน
• รองรับการเน้นคุณสมบัติส่วนประกอบ VSCODE
• - สนับสนุนการอ้างอิงตามความต้องการ
• เอกสารและตัวอย่างโดยละเอียด
• - รองรับ Typescript
• - สนับสนุนความเป็นสากล

การเชื่อมโยง

• เอกสารการใช้งานส่วนประกอบ
• คนอื่น ๆ
• คนขี้เกียจ
• ปลั๊กอินตลาด UniApp

เชื่อมต่อ

เกี่ยวกับปัญหา Vinui โปรดเพิ่ม WeChat เพื่อแลกเปลี่ยน โปรดทราบ: vinui