vin ui

Perpustakaan Komponen Vue Gaya JD, Mendukung Pengembangan Program H5 dan Mini Seluler

---

Vinui mengacu pada desain dan implementasi Nutui (perpustakaan komponen seluler ringan bergaya JD), dan versi UniApp yang diimplementasikan berdasarkan versi komponen Taro Applet Nutui-Vue

Modifikasi dan penyesuaian telah dilakukan untuk beberapa fitur UniApp, dan beberapa komponen baru telah ditambahkan, yang juga telah meningkatkan fungsi beberapa komponen.

Mulailah dengan cepat

Anda dapat merujuk pada dokumentasi proyek: Start cepat

Memasang

Vinui menyediakan paket NPM dan paket uni_modules untuk menginstal komponen.

Metode 1: Instalasi dan Operasi NPM

 # Using npm
npm install @vingogo/uni-ui

# Using yarn
yarn add @vingogo/uni-ui

# Using pnpm
pnpm add @vingogo/uni-ui

Metode 2: Unduh Pasar Plug-In UniApp

Alamat Plugin Pasar UniApp: https://ext.dcloud.net.cn/plugin?id=11187

Metode 3: Unduh kode

Unduh kode Vinui melalui GitHub, lalu salin kode kemasan ke proyek Anda sendiri:

1. Mengkloning kode repositori:

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

2. Ketergantungan Instalasi:

pnpm i

3. Di direktori packages/uni-ui , buat penyesuaian yang dipersonalisasi dengan kode VinUI yang sesuai dengan bisnis
4. Kode Bangun akan menghasilkan file JS yang dikompilasi dari file TS asli dan mengonversinya ke ES2015

pnpm run build:uni

Hasilkan file untuk menyalin di bawah packages/uni-ui/uni_modules

Cara menggunakan

1. Tambahkan konfigurasi EasyCom di pages.json :

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

2. Memperkenalkan gaya

Tambahkan kode berikut ke file masuk proyek Main.ts atau file Main.js:

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

3. Gunakan dalam proyek:

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

Operasi proyek

Proyek ini disarankan untuk menggunakan PNPM untuk menginstal dan menjalankan, dan memulai proyek:

1. Ketergantungan Instalasi

pnpm i

2. Jalankan H5 atau Applet

pnpm run dev

3. Pilih lingkungan untuk dijalankan berdasarkan opsi baris perintah interaktif
4. Jalankan kode di browser atau applet yang ditentukan untuk menjalankan folder contoh/dist/dev

Bangunan Komponen Vinui

• Bangun Kode Versi NPM:

pnpm run build:lib

Setelah menjalankan perintah di atas, kode untuk menerbitkan NPM akan dihasilkan di bawah packages/uni-ui/lib

• Bangun kode versi uni_modules:

pnpm run build:uni

Setelah menjalankan perintah di atas, kode untuk menerbitkan pasar UniApp akan dihasilkan di bawah packages/uni-ui/uni_modules

Fitur Vinui

• 50+ komponen berkualitas tinggi yang mencakup skenario seluler arus utama
• ? Dukung tema khusus dan tema kustom tingkat komponen
• Berdasarkan spesifikasi penglihatan JD
• ? Dukung Mode Gelap
• ? Mendukung satu set kode untuk mengembangkan applet multi-end H5+ secara bersamaan
• Mendukung Sorotan Properti Komponen VScode
• ? Mendukung kutipan berdasarkan permintaan
• Dokumentasi dan contoh terperinci
• ? Support TypeScript
• ? Mendukung internasionalisasi

Link

• Dokumentasi Penggunaan Komponen
• GitHub
• Gitee
• Plugin Pasar UniApp

menghubungkan

Mengenai masalah Vinui, harap tambahkan WeChat ke pertukaran. Harap dicatat: Vinui