vuecomp starter
1.0.0
เอกสารประกอบ: https://windlil.github.io/vuecomp-starter/
เทมเพลตการพัฒนาไลบรารีคอมโพเนนต์ Vue3 + Typescript แบบโอเพ่นซอร์สทำให้การสร้างไลบรารีคอมโพเนนต์ที่มีฟังก์ชันการทำงานเต็มรูปแบบเป็นเรื่องง่ายและสะดวก และพัฒนาตามการจัดเรียงไดเร็กทอรีที่ตกลงไว้ ดังนั้นนักพัฒนาจะต้องมุ่งเน้นไปที่การพัฒนาส่วนประกอบและการเขียนเอกสารโดยไม่ต้อง ให้ความสนใจกับการกำหนดค่าที่ยุ่งยากอื่น ๆ
รองรับการใช้งานเว็บไซต์เอกสารประกอบโดยอัตโนมัติ ซึ่งสามารถช่วยปรับใช้กับ GithubPage ได้ในคลิกเดียว
ฉันเชื่อว่าเพื่อนๆ หลายคนหวังว่าจะพัฒนา Component Library ด้วยตัวเอง นี่เป็นสิ่งที่น่าพึงพอใจมาก แต่คนส่วนใหญ่ติดอยู่ในขั้นตอนการก่อสร้างและบรรจุภัณฑ์เบื้องต้นของการพัฒนา Component Library และ vuecomp-starter ก็เกิดมาเพื่อสิ่งนี้
ขอแนะนำให้อ่านเอกสารนี้โดยละเอียดในระหว่างการพัฒนาครั้งแรก
# 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]
เอ็มไอที
