vitam

วิตกกังวล

Vitam เป็นแม่แบบเริ่มต้นที่มี VITE สำหรับโครงการส่วนหน้า เทมเพลตนี้มุ่งเน้นไปที่การสร้างเว็บไซต์คงที่และเหมาะสมกับโครงการขนาดเล็กถึงขนาดกลางเช่นหน้า Landing Page และเว็บไซต์ขององค์กร

สถานะ

คุณสมบัติ

• HMR ที่รวดเร็วด้วย vite
• การสนับสนุน PWA
• เซิร์ฟเวอร์ท้องถิ่นด่วน
• การบีบอัดสินทรัพย์ภาพ
• ทำลายไฟล์ขนาดเล็ก HTML ด้วยแฮนด์บาร์
• หมายถึง CSS ที่ยืนยง
• ออกจากกล่องไลบรารี JavaScript ที่มีประโยชน์
• ออกจากกล่องฟังก์ชั่น SCSS ที่มีประโยชน์และ mixins
• การตรวจสอบ typescript ด้วย eslint
• การตรวจสอบ HTML ด้วย HTML-validate
• การเปลี่ยนรูปแบบด้วย postcss
• นักวิ่งทดสอบในตัวด้วยความตลกขบขัน

ความต้องการ

• โหนด V18 (18.13.0)

การพึ่งพาหลัก

• เส้นด้าย
• ล้อเล่น
• eslint
• html-vallidate
• สวยกว่า
• Vite
• มือจับ
• ตัวพิมพ์ใหญ่
• เขี้ยว

วิธีใช้

โคลนที่เก็บนี้และติดตั้งการพึ่งพา

 yarn install

คำสั่งที่มีอยู่

เริ่มโครงการของคุณในโหมดการพัฒนา

 yarn start

สร้างโครงการของคุณสำหรับการผลิต

 yarn build

ตัวอย่างการผลิตในท้องถิ่น

 yarn serve

ตรวจสอบไฟล์ HTML

 yarn htmlValidate

ผ้าสำลีไฟล์โครงการของคุณ

 yarn lint

แก้ไขไฟล์โครงการของคุณ

 yarn lint:fix

ติดตั้งการพิมพ์ typescript ที่หายไป

 yarn postInstall

ตรวจสอบใบอนุญาตของแพ็คเกจ

 yarn checkLicense

รหัสทดสอบของโครงการ

 yarn test

 yarn test:watch

HTML

คุณสามารถจัดการกับการรวมไฟล์ HTML หลายไฟล์ด้วย Vite-Plugin-Handlebars ตรวจสอบให้แน่ใจว่าบริบทของแฮนด์บาร์ตามที่คุณต้องการ

หากคุณต้องการใช้ไฟล์บางส่วนให้เพิ่มไฟล์บางส่วนของคุณลงในโฟลเดอร์ _partials

src/_partials

คุณสามารถโทรหาไฟล์บางส่วนโดยตรงโดยเทมเพลตอื่น ๆ เช่นตัวอย่างนี้

 {{> _header }}
  <main>
    <h1>Welcome to VITAM Docs!</h1>
    <p>VITAM is a front-end template with Vite for static websites.</p>
  </main>
{{> _footer }}

site.config.ts จัดการข้อมูลพื้นฐานของเว็บไซต์ คุณต้องแก้ไข site.config.ts เมื่อคุณสร้างหน้าใหม่

 const pagesData = {
  '/sample/index.html' : {
    locale : siteData . locale ,
    title : `Smaple Page | ${ siteData . siteName } ` ,
    description : `This is a sample page. ${ siteData . description } ` ,
    url : ` ${ siteData . url } /sampple/` ,
    ogpImage : siteData . ogpImage ,
    ogType : 'article' ,
    fbAppId : siteData . fbAppId ,
    fbAdmins : siteData . fbAdmins ,
    twitterCard : siteData . twitterCard ,
    twitterSite : siteData . twitterSite ,
  } ,
} ;

เรียนรู้มือจับ

Sass (Dart Sass)

คุณสามารถจัดการแผ่นสไตล์อย่างมีเหตุผลด้วย Sass ฉันได้กำหนดฟังก์ชั่นและ mixins ไว้แล้ว ตรวจสอบไฟล์เหล่านี้ก่อนที่คุณจะเริ่มต้นโครงการของคุณ

• src/scss/foundation/functions/*.scss
• src/scss/foundation/mixins/*.scss

เรียนรู้ Sass

สถาปัตยกรรม CSS

เทมเพลตเริ่มต้นนี้ให้สถาปัตยกรรม CSS ซึ่งยั่งยืน CSS มาตรฐาน แต่ก็ไม่จำเป็นต้องมีสถาปัตยกรรมในทุกโครงการ ฉันแนะนำให้คุณแนะนำสถาปัตยกรรมที่ดีที่สุดในแต่ละโครงการ

เรียนรู้สถาปัตยกรรม CSS

CSS ที่ยืนยงคืออะไร?

CSS ที่ยืนยงเป็นสถาปัตยกรรมในการเขียนแผ่นสไตล์สำหรับโครงการเว็บขนาดใหญ่ที่เปลี่ยนแปลงอย่างรวดเร็วและมีอายุยืนยาว คุณสามารถได้รับประโยชน์เหล่านี้จาก CSS ที่ยั่งยืน

• รูปแบบการแยกตัวเองและแยกตัวเอง
• สเกลเป็นทุกขนาด
• หลีกเลี่ยงสิ่งที่เป็นนามธรรมและความจำเพาะ
• หนึ่งตัวเลือกสำคัญในการปกครองพวกเขาทั้งหมด
• การจัดการสถานะ

เรียนรู้ CSS ที่ยั่งยืน

วิธีการเขียนตัวเลือก CSS ที่ยั่งยืน

นี่คือตัวเลือกตัวอย่าง

 .namespace-Component_ChildNode

ตัวพิมพ์ใหญ่

เทมเพลตนี้รองรับ TypeScript ง่ายต่อการนำเข้าไฟล์ TS คุณสามารถปรับแต่งตัวเลือกของ TypeScript ด้วย tsconfig.json ได้ตลอดเวลา

ฉันได้กำหนดฟังก์ชั่นยูทิลิตี้บางอย่างแล้ว ตรวจสอบไฟล์เหล่านี้ก่อนที่คุณจะเริ่มต้นโครงการของคุณ

src/ts/utils/*.ts

คำสั่ง postInstall จะช่วยให้คุณติดตั้งการพิมพ์ในโครงการนี้

Jest อยู่ในโครงการนี้ คุณสามารถเรียกใช้ Jest จากบรรทัดคำสั่ง

เรียนรู้ typescript เรียนรู้ jest

ไอคอน

Vite-Plugin-SVG-ICONS ทำให้ง่ายต่อการจัดการไอคอน SVG

เพิ่มไฟล์ SVG ลงในโฟลเดอร์ไอคอน

 src/icons/

การใช้ svg sprite

โทรหาไอคอนด้วย ID

 < svg aria-hidden =" true " >
  < use href =" #icon-file " />
</ svg > 

PWA

Vite Plugin PWA รองรับการทำให้เว็บไซต์ของคุณเร็วขึ้น แก้ไข vite.config.ts หากคุณต้องการปรับแต่งการตั้งค่าสำหรับ PWA คุณสามารถสร้างไอคอนสำหรับ PWA ด้วย Favicon Generator

หมายเหตุ: โปรดแทนที่ไฟล์สินทรัพย์บางส่วนสำหรับ PWA ด้วยไฟล์โครงการของคุณ

เรียนรู้ PWA

การกระทำของ GitHub

หากคุณใช้ GitHub ในโครงการของคุณคุณสามารถใช้ประโยชน์จากการกระทำของ GitHub เพื่อทำให้เวิร์กโฟลว์การพัฒนาของคุณเป็นไปโดยอัตโนมัติ ตรวจสอบไฟล์นี้ก่อนที่คุณจะเริ่มโครงการของคุณ

.github/workflows/project-ci.yml

การกำหนดค่า

• package.json
• .EditorConfig
• .prettierrc
• .eslintrc.json
• .htmlvalidate.json
• .postcssrc.json
• .stylelintrc.json
• . node-version
• .TextLintrc
• vite.config.ts
• tsconfig.json
• jest.config.ts

IDE ที่แนะนำ

• รหัสสตูดิโอภาพ

หมายเหตุ

เทมเพลตเริ่มต้นนี้ไม่รองรับ Internet Explorer อย่าลังเลที่จะใช้แม่แบบนี้

มีส่วนร่วม

ยินดีต้อนรับคำขอดึงเสมอ

ใบอนุญาต

มิกซ์