vuecomp starter
1.0.0
الوثائق: https://windlil.github.io/vuecomp-starter/
يجعل قالب تطوير مكتبة مكونات Vue3 + Typescript مفتوح المصدر من السهل والبسيط بناء مكتبة مكونات كاملة الوظائف وتطويرها وفقًا لترتيب الدليل المتفق عليه، بحيث يحتاج المطورون فقط إلى التركيز على تطوير المكونات وكتابة الوثائق دون الحاجة إلى مع الاهتمام بالتكوينات المرهقة الأخرى.
يدعم النشر التلقائي لمواقع التوثيق، والتي يمكن أن تساعد في النشر على GithubPage بنقرة واحدة.
أعتقد أن العديد من الأصدقاء يأملون في تطوير مكتبة مكونة بأنفسهم، وهذا أمر مُرضٍ للغاية، لكن معظم الناس عالقون في مراحل البناء والتعبئة المبكرة لتطوير مكتبة المكونات، وقد ولد vuecomp لهذا الغرض.
يوصى بقراءة هذه الوثيقة بالتفصيل أثناء التطوير الأولي
# 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 ، مستحسن. أثناء التطوير الأولي، تحتاج إلى تعديل تكوين ملف .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
ما عليك سوى الانتباه إلى كتابة ملف md ضمن docs/guide/components/ ، وسيتم إنشاء محتوى الشريط الجانبي الجديد والتوجيه تلقائيًا، وليست هناك حاجة إلى الاهتمام بملفات التكوين الأخرى.
---
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]
معهد ماساتشوستس للتكنولوجيا
