https://github.com/erickpetru/cps-elements-example-vite
Um modelo de configuração mínima demonstrando como importar componentes CPS Elements com Vite como empacotador do projeto.
https://github.com/erickpetru/cps-elements-example-vite
vite web-components
Last synced: about 1 month ago
JSON representation
Um modelo de configuração mínima demonstrando como importar componentes CPS Elements com Vite como empacotador do projeto.
- Host: GitHub
- URL: https://github.com/erickpetru/cps-elements-example-vite
- Owner: ErickPetru
- License: mit
- Created: 2023-03-31T20:47:18.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-17T19:53:13.000Z (about 3 years ago)
- Last Synced: 2025-02-15T04:26:16.180Z (over 1 year ago)
- Topics: vite, web-components
- Language: JavaScript
- Homepage: https://stackblitz.com/edit/cps-elements-example-vite
- Size: 41 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# CPS Elements - Exemplo - Vite
Um modelo de configuração mínima demonstrando como importar componentes [CPS Elements](https://github.com/cpsrepositorio/cps-elements) com [Vite](https://vitejs.dev) como empacotador do projeto.
> **CPS Elements** é parte do projeto de UI/UX institucional, que também sustenta o [CPS Design System](https://cpsrepositorio.github.io/cps-design-system/), projetados originalmente pelo professor [Erick Petrucelli](https://github.com/ErickPetru). Independentemente de suas origens e motivações iniciais, é um projeto totalmente _open-source_ disponível sob os termos da licença [MIT](https://github.com/cpsrepositorio/cps-elements/blob/main/LICENSE.md).
Curiosamente, este exemplo na verdade mostra como nenhuma configuração extra é necessária com Vite! Apenas a instalação da biblioteca de componentes e as importações básicas de estilos e componentes, fim.
_Opcionalmente_, recursos podem carregados pela instalação local ao invés de serem carregados por CDN. Para tal, a única configuração extra necessária é copiar os ícones de `node_modules/@cps-elements/web/assets` para `assets` da distribuição empacotada, através do `vite-plugin-static-copy`. De fato, esta escolha opcional é o único motivo para o qual este projeto de exemplo contém um arquivo [vite.config.js](./vite.config.js).
Observe que Vite pode ser usado com _frameworks_ JavaScript, onde configurações extras podem ser necessárias, embora em geral rápidas e bem documentadas. De qualquer forma, para utilização com Web nativa, ou seja, HTML, CSS e JavaScript puros, tudo é _out-of-the-box_.
## Visualizando no StackBlitz
Este projeto pode ser executado, visualizado e até editado _online_. [Abrir no StackBlitz ⚡️](https://stackblitz.com/edit/cps-elements-example-vite)
## Executando manualmente este projeto
Para execução com _hot-reload_ em modo de desenvolvimento:
```sh
npm run dev
```
Para compilar para produção:
```sh
npm run build
```
Para iniciar um servidor local e testar a compilação de produção:
```sh
npm run preview
```
Então abra o navegador na URL exibida após os comandos.