Das Arbeitsbereichsstammverzeichnis wurde im vorherigen Artikel initialisiert. Vom Anfang dieses Artikels an müssen Sie nacheinander die Komponentenbibliothek, das Beispiel, die Dokumentation und die CLI erstellen. Der Inhalt dieses Artikels besteht darin, eine Entwicklungsumgebung für die Komponentenbibliothek zu erstellen.
1 Paketverzeichnis
Das Paketverzeichnis wurde zuvor im Projektstammverzeichnis erstellt , in dem alle Komponenten der Komponentenbibliothek und der Eingang zur Komponentenbibliothek gespeichert sind . In diesem Verzeichnis wurden zwei Unterverzeichnisse foo und yyg-demo-ui erstellt . Wofür werden diese beiden Verzeichnisse verwendet?
1.1 foo-Verzeichnis
Das foo-Verzeichnis stellt eine Beispielkomponente dar, die wir später verwenden werden, um zu testen, ob die Komponentenbibliothek in den Beispiel- und Komponentenbibliotheksdokumenten normal ausgeführt werden kann. Alle anschließend zu entwickelnden Komponenten (z. B. erweiterte Kartenkomponenten, JSON-Schema-Formularkomponenten usw.) stimmen mit der Dateiverzeichnisstruktur der foo- Komponente überein.
1.2 yyg-demo-ui Memo
Dieses Verzeichnis hat denselben Namen wie das gesamte Komponentenbibliotheksprojekt, sodass Ihr lokales Verzeichnis nicht unbedingt diesen Namen trägt. Dieses Verzeichnis ist das Einstiegsmodul der Komponentenbibliothek. Dieses Modul installiert alle Komponenten der Komponentenbibliothek (dh andere Pakete im Paketverzeichnis ) als Abhängigkeiten, führt alle Komponenten ein und stellt sie einheitlich bereit. Darüber hinaus ist es auch der Eingang zur gepackten Komponentenbibliothek. Es kann als Aggregationsmodul der Komponentenbibliothek verstanden werden.
2 Implementieren Sie die Beispielkomponente foo
2.1 Initialisieren Sie package.json
Das foo- Verzeichnis speichert Beispielkomponenten. Es ist auch ein Paket, daher müssen Sie das Pakete/foo- Verzeichnis in der Befehlszeile eingeben und es mit pnpm initialisieren :
pnpm init
Ändern Sie den Namensattributwert in der generierten package.json in foo . In Monorepo heißt das Namensattribut des Unterpakets normalerweise @organization name/foo . Da wir eine Komponentenbibliothek sind, können wir es @component Library name/ nennen. foo. , also @yyg-demo-ui/foo . Ich habe die folgenden Eigenschaften von package.json geändert:
{
"name": "@yyg-demo-ui/foo",
"version": "1.0.0",
"description": "示例组件",
"author": "程序员优雅哥 youyacoder",
"main": "index.ts",
...
}
2.2 Initialisieren Sie die Foo-Verzeichnisstruktur
Geben Sie das foo- Verzeichnis in der Befehlszeile ein :
- Erstellen Sie die Datei index.ts , die die Eintragsdatei der Komponente ist:
touch index.ts
- Erstellen Sie das Verzeichnis src , in dem der Implementierungsquellcode der Komponente gespeichert ist. Erstellen Sie „index.tsx “ und „types.ts“ in „foo/src/“ . Ersteres ist die spezifische Implementierung der Komponente und letzteres ist die Requisitendefinition und der Typ der Komponente:
mkdir src
touch src/index.tsx src/types.ts
Auf diese Weise wird die Verzeichnisstruktur der Beispielkomponente foo erstellt. Die Verzeichnisstruktur ist wie folgt:
packages/
|- foo/
|- index.ts
|- src/
|- index.ts
|- types.ts
|- yyg-demo-ui/
2.3 Definieren Sie Requisiten der Foo-Komponente
Definieren Sie die Requisiten der foo- Komponente in foo/src/types.ts und extrahieren Sie ihren Typ:
import {
ExtractPropTypes } from 'vue'
export const fooProps = {
msg: {
type: String,
required: false,
default: ''
}
}
export type FooProps = ExtractPropTypes<typeof fooProps>
Der obige Code definiert ein nicht erforderliches Attribut msg und verwendet die in vue bereitgestellten ExtractPropTypes , um den Typ von props zu extrahieren .
2.4 Implementieren Sie die Foo-Komponente
Implementieren Sie die foo- Komponente in foo/src/index.tsx :
import { defineComponent } from 'vue'
import { fooProps } from './types'
const NAME = 'yyg-foo'
export default defineComponent({
name: NAME,
props: fooProps,
setup (props, context) {
console.log(props, context)
const onBtnClick = () => {
console.log('点击按钮测试', props.msg)
}
return () => (
<div class={NAME}>
<h1>yyg-demo-ui Foo</h1>
<p class={NAME + '__description'}>msg is: { props.msg }</p>
<el-button type='primary' onClick={onBtnClick}>点击我</el-button>
</div>
)
}
})
Diese Komponente zeigt zum Testen lediglich Text und Element Plus- Schaltflächen an.
2.5 Definieren Sie die Foo-Komponenteneintragsdatei
foo/index.ts :
import {
App } from 'vue'
import Foo from './src'
Foo.install = (app: App) => {
app.component(Foo.name, Foo)
}
export default Foo
Diese Datei importiert und exportiert die Komponente und stellt die Installationsmethode für die Komponente bereit. Damit ist die Codierung der foo- Komponente abgeschlossen.
3 Realität yyg-demo-ui
Nachdem Sie die Foo- Beispielkomponente fertiggestellt haben , müssen Sie mit der Entwicklung des Komponentenbibliothekseintrags yyg-demo-ui beginnen. Der erste Schritt besteht darin, package.json zu initialisieren
3.1 Initialisieren Sie package.json
Geben Sie in der Befehlszeile das Verzeichnis packets/yyg-demo-ui ein:
pnpm init
Ändern Sie das Namensattribut der generierten package.json- Datei wie oben :
{
"name": "@yyg-demo-ui/yyg-demo-ui",
"version": "1.0.0",
"description": "组件库入口",
"author": "程序员优雅哥 youyacoder",
"main": "index.ts",
...
}
3.2 Abhängigkeiten installieren
Sowohl foo als auch yyg-demo-ui sind unabhängige Pakete. yyg-demo-ui muss foo in seinen Abhängigkeiten installieren, um die foo- Komponente einzuführen . In 2.1 wurde die Namenseigenschaft package.json von foo in @yyg-demo-ui/foo geändert und dieser Name sollte während der Installation verwendet werden. Geben Sie in der Konsole „packages/yyg-demo-ui“ ein und führen Sie den folgenden Befehl aus:
pnpm install @yyg-demo-ui/foo
Überprüfen Sie zu diesem Zeitpunkt die Abhängigkeiten von packets/yyg-demo-ui/package.json und Sie werden sehen, dass foo vom Workspace-Protokoll abhängig ist.
"dependencies": {
"@yyg-demo-ui/foo": "workspace:^1.0.0"
}
Gleichzeitig können Sie in node_modules auch ein zusätzliches @yyg-demo-ui/foo sehen :
3.3 Eintragsdatei definieren
Erstellen Sie index.ts unter packets/yyg-demo-ui , importieren Sie Komponenten und exportieren Sie:
import {
App } from 'vue'
import Foo from '@yyg-demo-ui/foo'
// import component end
import '../scss/index.scss'
const components = [
Foo
] // components
// 全局动态添加组件
const install = (app: App): void => {
components.forEach(component => {
app.component(component.name, component)
})
}
export default {
install
}
Zu diesem Zeitpunkt haben wir die Einrichtung der Komponentenentwicklungsumgebung im Wesentlichen abgeschlossen, es bleiben jedoch drei Probleme bestehen:
- Stildefinitionen für Komponenten und Komponentenbibliotheken
- So zeigen Sie die Wirkung einer Komponente an
- So erstellen Sie eine Komponentenbibliothek für die Verpackung und Freigabe
Diese Fragen werden der Reihe nach in den folgenden Artikeln beantwortet. Im nächsten Artikel werden die CSS-Architektur und der Beispielaufbau der Komponentenbibliothek erläutert.
Vielen Dank, dass Sie diesen Artikel gelesen haben. Wenn dieser Artikel Ihnen ein wenig Hilfe oder Inspiration gegeben hat, unterstützen Sie ihn bitte dreimal hintereinander, liken, folgen und sammeln Sie. Programmierer Elegant Brother wird weiterhin weitere nützliche Informationen mit Ihnen teilen.