Скачать vitam - Скачать исходный код vitam

vitam

Другие категории

v0.1.5 released

Скачать

Витам

Vitam-это стартовый шаблон с Vite для фронтальных проектов. Этот шаблон фокусируется на создании статического веб -сайта и подходит для малых и средних проектов, таких как целевая страница и корпоративный веб -сайт.

Статус

Функции

Быстрый HMR с Vite
Поддержка PWA
Быстрый локальный сервер
Сжатие изображений
Разрыв HTML меньшие файлы с рулем
Ссылаясь на прочный CSS
Из коробки полезные библиотеки JavaScript
Из коробки полезные функции SCSS и микшины
Проверка TypeScript с Eslint
Валидация HTML с html-валидатом
Преобразование стилей с PostCSS
Встроенный тестовый бегун с шуткой

Требования

Узел V18 (18.13.0)

Основные зависимости

Пряжа
Шутка
Эслинт
HTML-Vallidate
Красивее
Просие
Руль
Машинопись
Набережный

Как использовать

Клонировать это хранилище и установить зависимости

 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

Вы можете обрабатывать комплексные файлы HTML с помощью Vite-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 ,
  } ,
} ;

Узнайте руль

Sass (dart sass)

Вы можете логически управлять листами стиля с Sass. Я уже определил некоторые функции и микшины. Проверьте эти файлы, прежде чем вы начнете работу с вашим проектом.

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

Учитесь нах

Архитектура CSS

Этот шаблон стартера дает вам архитектуру CSS, которая в стандартной комплектации выдерживает CSS, но во всех проектах это не необходима. Я рекомендую вам представить лучшую архитектуру в каждом проекте.

Узнайте архитектуру CSS

Что такое прочный CSS?

Устойчивая CSS-это архитектура для написания листов в стиле для крупномасштабных, быстро меняющихся, долгоживущих веб-проектов. Вы можете получить эти преимущества от устойчивого CSS.

Изолированные, самостоятельные стили
Масштабировать до любого размера
Избегание абстракции и специфичности
Один селектор ключей, чтобы управлять ими всеми
Управление состоянием

Учитесь стойким CSS

Как писать устойчивые селекторы CSS

Вот пример -селектор.

 .namespace-Component_ChildNode

Машинопись

Этот шаблон поддерживает TypeScript. Это легко импортировать файлы TS. Вы можете настраивать параметры TypeScript с помощью tsconfig.json в любое время.

Я уже определил некоторые коммунальные функции. Проверьте эти файлы, прежде чем вы начнете работу с вашим проектом.

src/ts/utils/*.ts

postInstall Command поможет вам установить типинг в этом проекте.

Шутка встроена в этом проекте. Вы можете запустить шутку из командной строки.

Учитесь обучения обучению шутки

Значки

Vite-Plugin-SVG-ICons позволяет легко управлять иконами SVG.

Добавьте файлы SVG в папку значков.

 src/icons/

Использование SVG Sprite

Позвоните на значок с удостоверением личности.

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

PWA

Плагин VITE PWA поддерживает выполнение вашего сайта быстрее. Редактировать vite.config.ts если вы хотите настроить настройки для PWA. Вы можете генерировать значки для PWA с генератором Favicon.

Примечание. Замените некоторые файлы активов для PWA на файлы вашего проекта.

Узнайте PWA

Действия GitHub

Если вы используете GitHub в своем проекте, вы можете воспользоваться действиями GitHub для автоматизации рабочих процессов разработки. Проверьте этот файл, прежде чем начать работу с вашим проектом.

.github/workflows/project-ci.yml