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。随意使用此模板。

贡献

始终欢迎拉动请求。

执照

麻省理工学院