vitam
v0.1.5 released
Vitamは、フロントエンドプロジェクトのViteを備えたスターターテンプレートです。このテンプレートは、静的なWebサイトの構築に焦点を当てており、ランディングページや企業Webサイトなどの中小プロジェクトに適しています。
このリポジトリをクローンし、依存関係をインストールします
yarn install
開発モードでプロジェクトを開始します
yarn start
生産のためにプロジェクトを構築します
yarn build
ローカルでプレビュー生産ビルド
yarn serve
HTMLファイルを検証します
yarn htmlValidate
プロジェクトファイルを癒します
yarn lint
プロジェクトファイルを修正します
yarn lint:fix
欠落しているタイプスクリプトタイピングをインストールします
yarn postInstall
パッケージのライセンスを確認してください
yarn checkLicense
テストプロジェクトのコード
yarn test
yarn test:watch
vite-plugin handlebarsを使用して、複数のHTMLファイルのバンドルを処理できます。必要に応じて、ハンドルバーのコンテキストを確認してください。
複数の部分ファイルを使用する場合は、 _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で論理的にスタイルシートを管理できます。私はすでにいくつかの機能とミキシンを定義しています。プロジェクトを始める前に、これらのファイルをチェックしてください。
src/scss/foundation/functions/*.scsssrc/scss/foundation/mixins/*.scssSASSを学びます
このスターターテンプレートでは、CSSアーキテクチャを提供します。これは、CSSに標準的に耐えることができますが、すべてのプロジェクトで必要ではありません。各プロジェクトで最高のアーキテクチャを紹介することをお勧めします。
CSSアーキテクチャを学びます
耐えるCSSは、大規模で急速に変化する、長寿命のWebプロジェクトのためのスタイルシートを書くためのアーキテクチャです。耐えるCSSからこれらの利点を得ることができます。
永続的なCSSを学びます
これがサンプルセレクターです。
.namespace-Component_ChildNode
このテンプレートはTypeScriptをサポートしています。 TSファイルを簡単にインポートできます。 tsconfig.jsonでTypeScriptのオプションをいつでもカスタマイズできます。
私はすでにいくつかのユーティリティ関数を定義しています。プロジェクトを始める前に、これらのファイルをチェックしてください。
src/ts/utils/*.ts
postInstallコマンドは、このプロジェクトにタイピングをインストールするのに役立ちます。
このプロジェクトにはJestが組み込まれています。コマンドラインから冗談を実行できます。
TypeScriptを学ぶJESTを学びます
Vite-Plugin-SVG-Iconsにより、SVGアイコンを簡単に管理できます。
SVGファイルをアイコンフォルダーに追加します。
src/icons/
IDでアイコンを呼び出します。
< svg aria-hidden =" true " >
< use href =" #icon-file " />
</ svg > Vite Plugin PWAは、ウェブサイトをより速くすることをサポートしています。 PWAの設定をカスタマイズする場合は、 vite.config.tsを編集します。 Faviconジェネレーターを使用してPWAのアイコンを生成できます。
注：PWAの資産ファイルをプロジェクトのファイルに置き換えてください。
PWAを学びます
プロジェクトでGitHubを使用する場合、GitHubアクションを利用して開発ワークフローを自動化できます。プロジェクトを始める前に、このファイルをチェックしてください。
.github/workflows/project-ci.yml
このスターターテンプレートは、インターネットエクスプローラーをサポートしていません。このテンプレートを自由に使用してください。
プルリクエストはいつでも大歓迎です。
mit
