Download de vitam - download do código -fonte vitam

vitam

Outras categorias

v0.1.5 released

Baixar

Vitam

Vitam é um modelo de partida com vite para projetos de front-end. Este modelo se concentra na construção de um site estático e se adapta a projetos pequenos a médios, como uma página de destino e um site corporativo.

Status

Características

HMR rápido com vite
Suporte da PWA
Servidor local rápido
Comprimindo ativos de imagem
Quebrando arquivos HTML menores com guidão
Referindo -se ao CSS duradouro
Fora da caixa Bibliotecas JavaScript úteis
Funs e mixins de SCSS úteis para fora da caixa
Verificando o Typescript com ESLint
Validação HTML com Validato HTML
Estilos de transformação com postcss
Corredor de teste embutido com brincadeira

Requisitos

Nó v18 (18.13.0)

Principais dependências

Fio
Jove
Eslint
Html-vallidate
Mais bonito
Vite
Guidão
TypeScript
Sass

Como usar

Clone este repositório e instale dependências

 yarn install

Comandos disponíveis

Inicie seu projeto no modo de desenvolvimento

 yarn start

Construa seu projeto para produção

 yarn build

Visualizar localmente a construção de produção

 yarn serve

Validar arquivos HTML

 yarn htmlValidate

Lint seus arquivos de projeto

 yarn lint

Corrija seus arquivos de projeto

 yarn lint:fix

Instale as tímidas de matriz ausentes

 yarn postInstall

Verifique a licença do pacote

 yarn checkLicense

Código do projeto de teste

 yarn test

 yarn test:watch

Html

Você pode lidar com vários arquivos HTML com vite-plugin-MandleBars. Certifique -se de que o contexto do guidão seja necessário.

Se você deseja usar vários arquivos parciais, adicione seus arquivos parciais na pasta _partials .

src/_partials

Você pode chamar arquivos parciais diretamente por outros modelos como este exemplo.

 {{> _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 gerencia as informações básicas do site. Você precisa editar site.config.ts ao criar uma nova página.

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

Aprenda guidão

Sass (Dart Sass)

Você pode gerenciar as folhas de estilo logicamente com SASS. Eu já defini algumas funções e mixins. Confira esses arquivos antes de começar seu projeto.

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

Aprenda sass

Arquitetura CSS

Este modelo de partida fornece a arquitetura CSS que está suportando o CSS padrão, mas não é a arquitetura necessária em todos os projetos. Eu recomendo que você apresente a melhor arquitetura em cada projeto.

Aprenda a arquitetura CSS

O que é o CSS duradouro?

O CSS duradouro é uma arquitetura para escrever folhas de estilo para projetos da Web de longa escala, mudando rapidamente e de longa duração. Você pode obter esses benefícios com o duradouro CSS.

Estilos isolados e auto-garantidos
Escala para qualquer tamanho
Evitando abstração e especificidade
Um seletor -chave para governar todos eles
Estado de manuseio

Aprenda CSS duradouro

Como escrever seletores de CSS duradouros

Aqui está o seletor de exemplo.

 .namespace-Component_ChildNode

TypeScript

Este modelo suporta o TypeScript. É fácil importar arquivos TS. Você pode personalizar as opções do TypeScript com tsconfig.json a qualquer momento.

Eu já defini algumas funções de utilidade. Confira esses arquivos antes de começar seu projeto.

src/ts/utils/*.ts

O comando postInstall ajudará você a instalar as tímidas neste projeto.

O JEST está embutido neste projeto. Você pode executar a brincadeira na linha de comando.

Aprenda a Typescript Learn Jest

Ícones

O Vite-Plugin-SVG-icons facilita o gerenciamento dos ícones SVG.

Adicione arquivos SVG na pasta Icons.

 src/icons/

Uso de SVG Sprite

Ligue para o ícone com ID.

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

Pwa

O Vite Plugin PWA suporta tornar seu site mais rápido. Edit vite.config.ts se você deseja personalizar configurações para PWA. Você pode gerar ícones para PWA com o Favicon Generator.

NOTA: Substitua alguns arquivos de ativo por PWA pelos arquivos do seu projeto.

Aprenda PWA

Ações do GitHub

Se você usar o GitHub em seu projeto, poderá aproveitar as ações do GitHub para automatizar seus fluxos de trabalho de desenvolvimento. Confira este arquivo antes de começar seu projeto.

.github/workflows/project-ci.yml