vuecomp starter

vuecomp-starter

Dokumentation: https://windlil.github.io/vuecomp-starter/

einführen

Die Open-Source-Entwicklungsvorlage für Vue3 + Typescript-Komponentenbibliotheken macht es einfach und unkompliziert, eine voll funktionsfähige Komponentenbibliothek zu erstellen und diese gemäß der vereinbarten Verzeichnisanordnung zu entwickeln, sodass sich Entwickler nur auf die Entwicklung von Komponenten und das Schreiben von Dokumentation konzentrieren müssen Achten Sie auf andere umständliche Konfigurationen.

Unterstützt die automatische Bereitstellung von Dokumentationswebsites, die die Bereitstellung auf GithubPage mit einem Klick erleichtern können.

Ich glaube, dass viele Freunde hoffen, selbst eine Komponentenbibliothek zu entwickeln, aber die meisten Leute stecken in der frühen Konstruktions- und Verpackungsphase der Komponentenbibliotheksentwicklung fest, und vuecomp-starter ist dafür da.

Merkmal

• Die konventionelle Entwicklung reduziert den Arbeitsaufwand der Entwickler erheblich
• Die Vorkonstruktions- und Verpackungsphasen der Komponentenbibliothek sind abgeschlossen und Sie müssen sich nur noch auf die Entwicklung der Komponenten konzentrieren.
• Die gepackte Komponentenbibliothek wurde gemäß dem vereinbarten Verzeichnis entwickelt, unterstützt den On-Demand-Import und arbeitet perfekt mit TreeShaking zusammen
• Integrieren Sie Vitepress, erstellen Sie Dateien entsprechend dem vereinbarten Speicherort und die Weiterleitung wird automatisch konfiguriert. Sie müssen sich nur auf das Schreiben des Dokumentinhalts konzentrieren.
• Unterstützt das herkömmliche Routing-Schreiben für Testumgebungen, sodass das Schreiben von Routing-Dateien nicht mehr erforderlich ist
• Ausgestattet mit einem vollständig automatisierten Erstellungsskript, um den mühsamen Dateierstellungsprozess zu reduzieren
• Ändern Sie Entwicklungsmethoden, indem Sie einfach Umgebungsvariablen ändern
• Unterstützen Sie die automatische Bereitstellung der Dokumentation

Es wird empfohlen, dieses Dokument während der ersten Entwicklung ausführlich zu lesen

Installieren

 # install degit
npm  i -g degit

# clone starter
degit windlil/vuecomp-starter [your project name]

# switch to your project directory
cd [your project name]

# install dependence
pnpm i

# open docs
pnpm docs:dev

Einführung in den Skriptbefehl

• pnpm build : Packen Sie die Komponentenbibliothek.
• pnpm docs:dev : Dokumentationsdienst aktivieren.
• pnpm comp:play : Öffnen Sie die Komponententestumgebung.
• pnpm docs:build : Verpackungsdokumentation.

Automatisierungsskript:

• pnpm comp:create [component name] : Erstellen Sie eine Komponentendatei und importieren Sie sie automatisch in die Export-Root-Datei.
• pnpm comp:new [component name] : Erstellen Sie eine Testumgebungskomponentendatei.
• pnpm docs:new [component name] : Erstellen Sie eine neue Komponentendokumentation.
• pnpm component:create [component name] : pnpm comp:create , pnpm comp:new , pnpm docs:new Zusammenführungsbefehle, empfohlen.

Einführung in die Umgebungskonfiguration

Während der anfänglichen Entwicklung müssen Sie die Konfiguration der .env-Datei im Stammverzeichnis ändern.

 # CSS预处理器 默认支持sass和less
CSS_PREPROCESSOR = 'scss'
# 用于添加组件命名前缀，建议采用首字母大写格式，最后生成的组件会采取类似这种格式:<vc-button></vc-button>
COMPONENT_NAME = 'Vc'

Konventionen für die Komponentenentwicklung

Es wird empfohlen, die folgende Verzeichnisstruktur für die Komponentenentwicklung zu verwenden:

 ├─packages
|    ├─components
|    |     ├─style
|    |     |   └index.scss          // 组件库全局样式
|    |     ├─src
|    |     |  ├─components.ts       // 导出所有组件
|    |     |  ├─index.ts            // 全局注册所有组件
|    |     |  ├─button              // 组件文件
|    |     |  |   ├─index.ts        // 在此进行导出和局部注册
|    |     |  |   ├─src             // ❗实际开发中只需要关注到src下的文件
|    |     |  |   |  ├─button.vue 
|    |     |  |   |  ├─style
|    |     |  |   |  |   └index.scss

Es wird empfohlen, den Befehl pnpm component:create [component name] zu verwenden, um eine neue Komponente zu erstellen, um die langwierigen Einführungs- und Erstellungsschritte zu automatisieren.

Wenn Sie keine automatischen Befehle verwenden, können Sie nach dem Muster der von der Vorlage erstellten Beispielkomponenten entwickeln. Diese Methode ist recht mühsam, daher wird dringend empfohlen, Befehle zum Erstellen neuer Komponenten zu verwenden!

Konventionen für die Dokumententwicklung

 ├─docs
|  ├─index.md               // 文档首页内容
|  ├─guide              
|  |   ├─features.md        // 特性
|  |   ├─started.md         // 快速上手
|  |   ├─components         // 各组件的具体说明
|  |   |     └button.md

Sie müssen nur auf das Schreiben der MD-Datei unter docs/guide/components/ achten, und neue Seitenleisteninhalte und Routing werden automatisch erstellt. Es besteht keine Notwendigkeit, auf andere Konfigurationsdateien zu achten.

️ Beachten Sie, dass in der MD-Datei das folgende Format verwendet werden muss, um den Namen der Seitenleiste zu bestimmen:

 ---
sider_text="按钮 button"
---

Den spezifischen Inhalt des Komponentenbeschreibungsdokuments entnehmen Sie bitte der Beispielkomponente.

Automatisierte Bereitstellung

Die spezifische Datei befindet sich in ./.github/workflows/deploy.yaml

示例：
git tag [email protected]

git add .

git commit -m 'chore: update'

git push

git push origin [email protected]

Lizenz

MIT