vitam Download - Download vitam Source Code

vitam

فئات أخرى

v0.1.5 released

تنزيل

فيتام

Vitam هو قالب بداية مع Vite للمشاريع الأمامية. يركز هذا القالب على بناء موقع ويب ثابت ويستفيد من مشاريع صغيرة إلى متوسطة مثل صفحة مقصودة وموقع على شبكة الإنترنت.

حالة

سمات

سريع HMR مع vite
دعم PWA
خادم محلي سريع
ضغط أصول الصورة
كسر ملفات HTML أصغر مع المقاود
في إشارة إلى CSS الدائمة
خارج المربع مكتبات JavaScript مفيدة
خارج المربع وظائف SCSS مفيدة و Mixins
التحقق من typeScript مع ESLINT
التحقق من صحة HTML مع هات إم إل
تحويل الأنماط مع postcss
عداء اختبار مدمج مع Jest

متطلبات

العقدة V18 (18.13.0)

التبعيات الرئيسية

غزل
مزاح
eslint
HTML-Vallidate
أجمل
فيت
المقاود
TypeScript
ساس

كيفية استخدام

استنساخ هذا المستودع وتثبيت التبعيات

 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 متعددة مع Fite-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 ,
  } ,
} ;

تعلم المقاود

ساس (دارت ساس)

يمكنك إدارة أوراق الأنماط منطقيا مع ساس. لقد حددت بالفعل بعض الوظائف والمزيج. تحقق من هذه الملفات قبل البدء في مشروعك.

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

تعلم ساس

الهندسة المعمارية CSS

يمنحك هذا القالب المبتدئ بنية CSS التي تحمل CSS بشكل قياسي ، لكنها ليست بنية ضرورية في جميع المشاريع. أوصيك بتقديم أفضل بنية في كل مشروع.

تعلم العمارة CSS

ما الذي يستمر CSS؟

Induring CSS هي بنية لكتابة أوراق أنماط لمشاريع ويب واسعة النطاق وتتغير بسرعة وطويلة العمر. يمكنك الحصول على هذه الفوائد من CSS الدائمة.

أنماط معزولة ، ذاتية
التوسع إلى أي حجم
تجنب التجريد والخصوصية
محدد مفتاح واحد يحكمهم جميعًا
دولة التعامل

تعلم CSS الدائمة

كيفية كتابة محددات CSS الدائمة

هنا هو المثال المحدد.

 .namespace-Component_ChildNode

TypeScript

هذا القالب يدعم TypeScript. من السهل استيراد ملفات TS. يمكنك تخصيص خيارات TypeScript مع tsconfig.json في أي وقت.

لقد حددت بالفعل بعض وظائف الأداة المساعدة. تحقق من هذه الملفات قبل البدء في مشروعك.

src/ts/utils/*.ts

سيساعدك أمر postInstall على تثبيت الكتابة في هذا المشروع.

Jest مدمج في هذا المشروع. يمكنك تشغيل Jest من سطر الأوامر.

تعلم TypeScript تعلم Jest

أيقونات

تجعل Vite-Plugin-SVG-icons من السهل إدارة أيقونات SVG.

أضف ملفات SVG إلى مجلد الرموز.

 src/icons/

استخدام SVG Sprite

استدعاء الرمز مع معرف.

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

PWA

يدعم Vite Plugin PWA جعل موقع الويب الخاص بك أسرع. تحرير vite.config.ts إذا كنت ترغب في تخصيص الإعدادات لـ PWA. يمكنك إنشاء أيقونات لـ PWA مع مولد Favicon.

ملاحظة: يرجى استبدال بعض ملفات الأصول لـ PWA بملفات مشروعك.

تعلم PWA