vitam

維塔姆

Vitam是一個起動模板，具有用於前端項目的Vite。該模板著重於構建靜態網站，並適合中小型項目，例如著陸頁和公司網站。

地位

特徵

• 快速HMR與Vite
• PWA支持
• 快速本地服務器
• 壓縮圖像資產
• 用車把破壞HTML較小的文件
• 指持久的CSS
• 開箱即用的JavaScript庫
• 開箱即用的有用SCSS功能和混音素
• 用eslint檢查打字稿
• HTML驗證的HTML驗證
• 使用PostCSS轉換樣式
• 帶開玩笑的內置測試跑者

要求

• 節點V18（18.13.0）

主要依賴性

• 紗
• 笑話
• eslint
• html-vallidate
• 更漂亮
• Vite
• 車把
• 打字稿
• Sass

如何使用

克隆此存儲庫並安裝依賴項

 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

html

您可以使用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（Dart Sass）

您可以使用Sass邏輯地管理樣式表。我已經定義了一些功能和混合素。在開始項目之前，請查看這些文件。

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

學習SASS

CSS架構

此入門模板為您提供了標準持續CSS的CSS體系結構，但這並不是所有項目中的必要體系結構。我建議您介紹每個項目中最好的架構。

學習CSS體系結構

什麼是持久的CSS？

持久的CSS是為大規模，快速變化的長期網絡項目編寫樣式表的架構。您可以從持久的CSS中獲得這些好處。

• 孤立的，自我保存的風格
• 擴展到任何尺寸
• 避免抽象和特異性
• 一個統治它們的關鍵選擇器
• 處理狀態

學習持久的CSS

如何編寫持久的CSS選擇器

這是示例選擇器。

 .namespace-Component_ChildNode

打字稿

此模板支持打字稿。導入TS文件很容易。您可以隨時使用tsconfig.json自定義打字稿的選項。

我已經定義了一些實用程序功能。在開始項目之前，請查看這些文件。

src/ts/utils/*.ts

postInstall命令將幫助您在此項目中安裝打字。

開玩笑是在這個項目中內置的。您可以從命令行開玩笑。

學習打字稿學習開玩笑

圖示

Vite-Plugin-SVG-Icons使管理SVG圖標變得容易。

將SVG文件添加到圖標文件夾中。

 src/icons/

使用SVG精靈

使用ID調用圖標。

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

PWA

Vite插件PWA支持使您的網站更快。編輯vite.config.ts如果您想自定義PWA設置。您可以使用Favicon發電機為PWA生成圖標。

注意：請用項目文件替換一些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

• Visual Studio代碼

筆記

此入門模板不支持Internet Explorer。隨意使用此模板。

貢獻

始終歡迎拉動請求。

執照

麻省理工學院