Unduh vitam - Unduh Kode Sumber vitam

vitam

Kategori lainnya

v0.1.5 released

Unduh

Vitam

Vitam adalah templat pemula dengan vite untuk proyek front-end. Template ini berfokus pada membangun situs web statis dan sesuai dengan proyek kecil hingga menengah seperti halaman arahan dan situs web perusahaan.

Status

Fitur

HMR cepat dengan vite
Dukungan PWA
Server lokal cepat
Mengompresi aset gambar
Melanggar file html yang lebih kecil dengan setang
Mengacu pada CSS yang bertahan lama
Di luar kotak perpustakaan javascript yang berguna
Di luar kotak fungsi SCSS yang berguna dan mixin
Memeriksa naskah dengan eslint
Validasi HTML dengan HTML-Validate
Mengubah gaya dengan postcs
Pelari uji bawaan dengan bercanda

Persyaratan

Node V18 (18.13.0)

Ketergantungan utama

Benang
Bersenda gurau
Eslint
Html-validate
Lebih cantik
Vite
Setang
Naskah
Kelancangan

Cara menggunakan

Klon repositori ini dan instal dependensi

 yarn install

Perintah yang tersedia

Mulai Proyek Anda dalam Mode Pengembangan

 yarn start

Bangun Proyek Anda untuk Produksi

 yarn build

Pratinjau Pratinjau Produksi Lokal

 yarn serve

Validasi file HTML

 yarn htmlValidate

Serat file proyek Anda

 yarn lint

Perbaiki file proyek Anda

 yarn lint:fix

Instal TypeScript Typing yang Hilang

 yarn postInstall

Periksa lisensi paket

 yarn checkLicense

Kode Proyek Uji

 yarn test

 yarn test:watch

Html

Anda dapat menangani menggabungkan beberapa file HTML dengan vite-plugin-handlebars. Pastikan konteks setang sesuai kebutuhan.

Jika Anda ingin menggunakan beberapa file parsial, tambahkan file parsial Anda ke dalam folder _partials .

src/_partials

Anda dapat memanggil file parsial secara langsung oleh templat lain seperti contoh ini.

 {{> _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 mengelola informasi dasar situs. Anda harus mengedit site.config.ts saat Anda membuat halaman baru.

 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 ,
  } ,
} ;

Pelajari setang

Sass (dart sass)

Anda dapat mengelola lembar gaya secara logis dengan Sass. Saya sudah mendefinisikan beberapa fungsi dan mixin. Lihat file -file ini sebelum Anda memulai proyek Anda.

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

Pelajari Sass

Arsitektur CSS

Template starter ini memberi Anda arsitektur CSS yang abadi CSS secara standar, tetapi itu tidak diperlukan arsitektur di semua proyek. Saya sarankan Anda memperkenalkan arsitektur terbaik di setiap proyek.

Pelajari arsitektur CSS

Apa CSS yang bertahan lama?

Enduring CSS adalah arsitektur untuk menulis lembar gaya untuk proyek web skala besar, berubah dengan cepat, dan berumur panjang. Anda bisa mendapatkan manfaat ini dari CSS yang bertahan lama.

Gaya yang terisolasi dan kuartal
Skala ke ukuran berapa pun
Menghindari abstraksi dan spesifisitas
Salah satu pemilih kunci untuk memerintah semuanya
Status Penanganan

Pelajari CSS yang bertahan lama

Cara menulis pemilih CSS yang abadi

Berikut adalah contoh pemilih.

 .namespace-Component_ChildNode

Naskah

Template ini mendukung naskah. Sangat mudah untuk mengimpor file TS. Anda dapat menyesuaikan opsi TypeScript dengan tsconfig.json kapan saja.

Saya sudah mendefinisikan beberapa fungsi utilitas. Lihat file -file ini sebelum Anda memulai proyek Anda.

src/ts/utils/*.ts

Perintah postInstall akan membantu Anda menginstal pengetikan dalam proyek ini.

Jest bawaan dalam proyek ini. Anda dapat menjalankan Jest dari baris perintah.

Belajar naskah belajar bercanda

Ikon

Icons vite-plugin-svg-Icons memudahkan untuk mengelola ikon SVG.

Tambahkan file SVG ke dalam folder Icons.

 src/icons/

Penggunaan SVG Sprite

Hubungi ikon dengan ID.

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

PWA

Vite Plugin PWA mendukung membuat situs web Anda lebih cepat. Edit vite.config.ts Jika Anda ingin menyesuaikan pengaturan untuk PWA. Anda dapat menghasilkan ikon untuk PWA dengan Favicon Generator.

Catatan: Harap ganti beberapa file aset untuk PWA dengan file proyek Anda.

Pelajari PWA

Tindakan GitHub

Jika Anda menggunakan GitHub dalam proyek Anda, Anda dapat memanfaatkan tindakan GitHub untuk mengotomatisasi alur kerja pengembangan Anda. Lihat file ini sebelum Anda memulai proyek Anda.

.github/workflows/project-ci.yml