vuecomp starter

vuecomp-starter

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

introduire

Le modèle de développement de bibliothèque de composants open source Vue3 + Typescript permet de créer simplement et facilement une bibliothèque de composants entièrement fonctionnelle et de la développer selon la disposition des répertoires convenue, de sorte que les développeurs n'aient qu'à se concentrer sur le développement de composants et la rédaction de la documentation sans en prêtant attention aux autres configurations encombrantes.

Prend en charge le déploiement automatique de sites Web de documentation, ce qui peut aider à déployer sur GithubPage en un seul clic.

Je crois que de nombreux amis espèrent développer eux-mêmes une bibliothèque de composants. C'est une chose très enrichissante, mais la plupart des gens sont coincés dans les premières étapes de construction et d'empaquetage du développement de la bibliothèque de composants, et vuecomp-starter est fait pour cela.

caractéristiques

• Le développement conventionnel réduit considérablement la charge de travail des développeurs
• Les étapes de pré-construction et de packaging de la bibliothèque de composants sont terminées et il ne vous reste plus qu'à vous concentrer sur le développement des composants.
• Développée selon le répertoire convenu, la bibliothèque de composants packagée peut prendre en charge l'importation à la demande et coopère parfaitement avec TreeShaking
• Intégrez Vitepress, créez des fichiers selon l'emplacement convenu et le routage sera automatiquement configuré. Vous n'aurez plus qu'à vous concentrer sur la rédaction du contenu du document.
• Prend en charge l'écriture de routage conventionnelle pour les environnements de test, éliminant ainsi le besoin d'écrire des fichiers de routage
• Equipé d'un script de création automatisé complet pour réduire le processus fastidieux de création de fichiers
• Modifier les méthodes de développement en modifiant simplement les variables d'environnement
• Prise en charge du déploiement automatique de la documentation

Il est recommandé de lire ce document en détail lors du développement initial

Installer

 # 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

Introduction à la commande scripts

• pnpm build : Emballez la bibliothèque de composants.
• pnpm docs:dev : Activer le service de documentation.
• pnpm comp:play : Ouvrez l'environnement de test des composants.
• pnpm docs:build : Documentation sur l'empaquetage.

Script d'automatisation :

• pnpm comp:create [component name] : Créez un fichier de composant et importez-le automatiquement dans le fichier racine d'exportation.
• pnpm comp:new [component name] : crée un fichier de composant d'environnement de test.
• pnpm docs:new [component name] : Créez une nouvelle documentation de composant.
• pnpm component:create [component name] : pnpm comp:create , pnpm comp:new , pnpm docs:new commandes de fusion, recommandées.

introduction à la configuration de l'environnement

Lors du développement initial, vous devez modifier la configuration du fichier .env dans le répertoire racine.

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

Conventions de développement de composants

Il est recommandé d'utiliser la structure de répertoires suivante pour le développement de composants :

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

Il est recommandé d'utiliser la commande pnpm component:create [component name] pour créer un nouveau composant afin d'aider à automatiser les étapes fastidieuses d'introduction et de création.

Si vous n'utilisez pas de commandes automatiques, vous pouvez développer selon le modèle des exemples de composants créés par le modèle. Cette méthode sera assez fastidieuse, il est donc fortement recommandé d'utiliser des commandes pour créer de nouveaux composants !

Conventions de développement de documents

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

Il vous suffit de prêter attention à l'écriture du fichier md sous docs/guide/components/ , et le nouveau contenu et le nouveau routage de la barre latérale seront automatiquement créés. Il n'est pas nécessaire de prêter attention aux autres fichiers de configuration.

️ Notez que le format suivant doit être utilisé dans le fichier md pour déterminer le nom de la barre latérale :

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

Pour le contenu spécifique du document de description du composant, veuillez vous référer à l'exemple de composant.

Déploiement automatisé

Le fichier spécifique se trouve dans ./.github/workflows/deploy.yaml

示例：
git tag [email protected]

git add .

git commit -m 'chore: update'

git push

git push origin [email protected]

Licence

MIT