vuecomp starter

vuecomp-starter

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

memperkenalkan

Templat pengembangan pustaka komponen Vue3 + TypeScript open source menyederhanakan dan memudahkan pembuatan pustaka komponen yang berfungsi penuh dan mengembangkannya sesuai dengan pengaturan direktori yang disepakati, sehingga pengembang hanya perlu fokus pada pengembangan komponen dan penulisan dokumentasi tanpa memperhatikan konfigurasi rumit lainnya.

Mendukung penerapan otomatis situs web dokumentasi, yang dapat membantu penerapan ke GithubPage dengan satu klik.

Saya yakin banyak teman yang berharap untuk mengembangkan pustaka komponen sendiri Ini adalah hal yang sangat memuaskan, tetapi kebanyakan orang terjebak dalam tahap awal konstruksi dan pengemasan pengembangan pustaka komponen, dan vuecomp-starter adalah untuk ini.

ciri

• Pengembangan konvensional sangat mengurangi beban kerja pengembang
• Tahap pra-konstruksi dan pengemasan pustaka komponen telah selesai, dan Anda hanya perlu fokus pada pengembangan komponen.
• Dikembangkan sesuai dengan direktori yang disepakati, pustaka komponen yang dikemas dapat mendukung impor sesuai permintaan dan bekerja sama secara sempurna dengan TreeShaking
• Integrasikan Vitepress, buat file sesuai lokasi yang disepakati, dan perutean akan dikonfigurasi secara otomatis.
• Mendukung penulisan perutean konvensional untuk lingkungan pengujian, sehingga menghilangkan kebutuhan untuk menulis file perutean
• Dilengkapi dengan skrip pembuatan otomatis yang lengkap untuk mengurangi proses pembuatan file yang membosankan
• Ubah metode pengembangan hanya dengan memodifikasi variabel lingkungan
• Mendukung penyebaran dokumentasi secara otomatis

Disarankan untuk membaca dokumen ini secara detail selama pengembangan awal

Memasang

 # 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

Pengenalan perintah skrip

• pnpm build : Kemas pustaka komponen.
• pnpm docs:dev : Aktifkan layanan dokumentasi.
• pnpm comp:play : Buka lingkungan pengujian komponen.
• pnpm docs:build : Dokumentasi pengemasan.

Skrip otomatisasi:

• pnpm comp:create [component name] : Membuat file komponen dan secara otomatis mengimpornya ke file root ekspor.
• pnpm comp:new [component name] : Membuat file komponen lingkungan pengujian.
• pnpm docs:new [component name] : Buat dokumentasi komponen baru.
• pnpm component:create [component name] : pnpm comp:create , pnpm comp:new , pnpm docs:new , direkomendasikan.

pengenalan konfigurasi env

Selama pengembangan awal, Anda perlu mengubah konfigurasi file .env di direktori root.

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

Konvensi pengembangan komponen

Disarankan untuk menggunakan struktur direktori berikut untuk pengembangan komponen:

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

Disarankan untuk menggunakan perintah pnpm component:create [component name] untuk membuat komponen baru guna membantu mengotomatiskan langkah-langkah pengenalan dan pembuatan yang membosankan.

Jika Anda tidak menggunakan perintah otomatis, Anda dapat mengembangkan sesuai dengan pola contoh komponen yang dibuat oleh template. Cara ini akan cukup membosankan, jadi sangat disarankan untuk menggunakan perintah untuk membuat komponen baru!

Konvensi pengembangan dokumen

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

Anda hanya perlu memperhatikan penulisan file md di bawah docs/guide/components/ , dan konten sidebar serta routing baru akan otomatis dibuat.

️ Perhatikan bahwa format berikut perlu digunakan dalam file md untuk menentukan nama sidebar:

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

Untuk konten spesifik dokumen deskripsi komponen, silakan merujuk ke contoh komponen.

Penerapan otomatis

File spesifiknya ada di ./.github/workflows/deploy.yaml

示例：
git tag [email protected]

git add .

git commit -m 'chore: update'

git push

git push origin [email protected]

Lisensi

MIT