vin ui

JD Style Lightweight Vue Komponentenbibliothek, unterstützt mobile H5- und Mini -Programmentwicklung

---

Vinui bezieht sich auf das Design und die Implementierung von NUTUI (Lightweight Mobile Component Library) und die UniApp

Es wurden Änderungen und Anpassungen an einigen Merkmalen von UNIAPP vorgenommen, und einige neue Komponenten wurden hinzugefügt, was auch die Funktionen einiger Komponenten verbessert hat.

Fangen Sie schnell an

Sie können sich auf die Projektdokumentation beziehen: Schnellstart

Installieren

Vinui stellt das Paket NPM und UNI_MODULES Paket zur Installation von Komponenten bereit.

Methode 1: NPM -Installation und -betrieb

 # Using npm
npm install @vingogo/uni-ui

# Using yarn
yarn add @vingogo/uni-ui

# Using pnpm
pnpm add @vingogo/uni-ui

Methode 2: UNIIAPP-Plug-in-Markt-Download

UNIAPP -Markt -Plugin -Adresse: https://ext.dcloud.net.cn/plugin?id=11187

Methode 3: Laden Sie den Code herunter

Laden Sie den Vinui -Code über GitHub herunter und kopieren Sie dann den verpackten Code in Ihr eigenes Projekt:

1. Klonen des Repository -Codes:

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

2. Installationsabhängigkeiten:

pnpm i

3. Nehmen Sie im Verzeichnis packages/uni-ui personalisierte personalisierte Anpassungen am Vinui-Code vor, der dem Unternehmen entspricht
4. Der Build -Code generiert die kompilierte JS -Datei aus der ursprünglichen TS -Datei und konvertiert sie in ES2015

pnpm run build:uni

Generieren Sie Dateien zum Kopieren von packages/uni-ui/uni_modules

Wie man benutzt

1. Fügen Sie Easycom -Konfiguration in pages.json :

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

2. Styles einführen

Fügen Sie den folgenden Code zur Projekteingangsdatei Main.ts oder Main.js -Datei hinzu:

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

3. Verwendung im Projekt:

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

Projektbetrieb

Das Projekt wird empfohlen, PNPM zu verwenden, um zu installieren und auszuführen, und das Projekt zu starten:

1. Installationsabhängigkeiten

pnpm i

2. Führen Sie H5 oder Applet aus

pnpm run dev

3. Wählen Sie die Umgebung aus, die auf den interaktiven Befehlszeilenoptionen ausgeführt werden soll
4. Führen Sie den Code im Browser oder angegebenen Applet aus, um den Beispiel/Dist/Dev -Ordner auszuführen

Vinui -Komponentengebäude

• NPM -Versionscode erstellen:

pnpm run build:lib

Nach der Ausführung des obigen Befehls wird der Code für die Veröffentlichung von NPM unter packages/uni-ui/lib generiert

• Erstellen Sie den Versionscode Uni_Modules:

pnpm run build:uni

Nach der Ausführung des obigen Befehls wird der Code für die Veröffentlichung des UNIAPP-Marktes unter packages/uni-ui/uni_modules

Vinui -Funktionen

• 50+ hochwertige Komponenten, die mobile Mainstream-Szenarien abdecken
• ? Unterstützen Sie dynamische benutzerdefinierte Themen und benutzerdefinierte Themen auf Komponentenebene
• Basierend auf JD -Visionspezifikationen
• ? Dunkelmodus unterstützen
• ? Unterstützt einen Code-Satz, um gleichzeitig H5+ Multi-End-Applets zu entwickeln
• Unterstützt die Hervorhebung der Eigenschaften von VSCODE -Komponenten
• ? Unterstützen Sie On-Demand-Zitate
• Detaillierte Dokumentation und Beispiele
• ? Unterstützen Sie Typenkript
• ? Unterstützung der Internationalisierung

Link

• Dokumentation der Komponentennutzung
• Github
• Gitee
• UNIAPP Market Plugin

verbinden

In Bezug auf Vinui -Probleme fügen Sie den Austausch WeChat hinzu. Bitte beachten Sie: Vinui