vuecomp starter

vuecomp-スターター

ドキュメント: https://windlil.github.io/vuecomp-starter/

導入

オープン ソースの Vue3 + Typescript コンポーネント ライブラリ開発テンプレートを使用すると、完全に機能するコンポーネント ライブラリを構築し、合意されたディレクトリ配置に従って開発することがシンプルかつ簡単になります。そのため、開発者はコンポーネントの開発とドキュメントの作成に集中するだけで済みます。他の面倒な設定に注意してください。

ドキュメント Web サイトの自動デプロイメントをサポートしており、ワンクリックで GithubPage にデプロイできます。

多くの友人がコンポーネント ライブラリを自分で開発したいと考えていると思いますが、ほとんどの人はコンポーネント ライブラリ開発の初期の構築とパッケージ化の段階で行き詰まっており、vuecomp-starter はそのために生まれました。

特性

• 従来の開発では開発者の作業負荷が大幅に軽減されます
• コンポーネント ライブラリの事前構築とパッケージ化の段階は完了しているので、あとはコンポーネントの開発に集中するだけです。
• 合意されたディレクトリに従って開発されたパッケージ化されたコンポーネント ライブラリは、オンデマンドのインポートをサポートし、TreeShaking と完全に連携します。
• Vitepress を統合し、合意された場所に従ってファイルを作成すると、ドキュメントのコンテンツを書くことに集中するだけでルーティングが自動的に設定されます。
• テスト環境向けの従来のルーティング書き込みをサポートし、ルーティング ファイルを書き込む必要がなくなります。
• 完全に自動化された作成スクリプトを装備し、面倒なファイル作成プロセスを削減します。
• 環境変数を変更するだけで開発方法を変更できます
• ドキュメントの自動展開をサポート

初期開発中にこのドキュメントを詳細に読むことをお勧めします。

インストール

 # 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

スクリプトコマンドの概要

• pnpm build : コンポーネント ライブラリをパッケージ化します。
• pnpm docs:dev : ドキュメント サービスを有効にします。
• pnpm comp:play : コンポーネントのテスト環境を開きます。
• pnpm docs:build : パッケージ化ドキュメント。

自動化スクリプト:

• pnpm comp:create [component name] : コンポーネント ファイルを作成し、エクスポート ルート ファイルに自動的にインポートします。
• pnpm comp:new [component name] : テスト環境コンポーネントファイルを作成します。
• pnpm docs:new [component name] : 新しいコンポーネントのドキュメントを作成します。
• pnpm component:create [component name] : pnpm comp:create 、 pnpm comp:new 、 pnpm docs:new merge コマンド、推奨。

環境設定の概要

初期開発中に、ルート ディレクトリ内の .env ファイルの構成を変更する必要があります。

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

コンポーネント開発の規約

コンポーネント開発には次のディレクトリ構造を使用することをお勧めします。

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

面倒な導入と作成の手順を自動化するには、コマンドpnpm component:create [component name]を使用して新しいコンポーネントを作成することをお勧めします。

自動コマンドを使用しない場合は、テンプレートで作成されたサンプル コンポーネントのパターンに従って開発することになりますが、この方法は非常に面倒なので、コマンドを使用して新しいコンポーネントを作成することを強くお勧めします。

文書開発の規則

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

docs/guide/components/下の md ファイルの記述に注意するだけで、新しいサイドバーのコンテンツとルーティングが自動的に作成されます。他の設定ファイルに注意を払う必要はありません。

️サイドバーの名前を決定するには、md ファイルで次の形式を使用する必要があることに注意してください。

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

コンポーネント説明ドキュメントの具体的な内容については、サンプルコンポーネントを参照してください。

自動展開

特定のファイルは./.github/workflows/deploy.yamlにあります。

示例：
git tag [email protected]

git add .

git commit -m 'chore: update'

git push

git push origin [email protected]

ライセンス

マサチューセッツ工科大学