CPS Elements - Exemplo - Vue 3

Projeto de exemplo da integração de componentes CPS Elements com Vue 3 e Vite.

CPS Elements é parte do projeto de UI/UX institucional, que também sustenta o CPS Design System, projetados originalmente pelo professor Erick Petrucelli. Independentemente de suas origens e motivações iniciais, é um projeto totalmente open-source disponível sob os termos da licença MIT.

Executando o projeto

Para execução local, é necessário um ambiente Node pré-configurado. Em seguida, executa a instalação dos pacotes:

npm install

Para executar em modo de desenvolvimento, com suporte a hot-reload, executar em seguida:

npm run dev

Para testar a checagem de tipos, compilação e minificação para produção:

npm run build

Como a integração funciona

Este projeto de exemplo simples já está pronto para execução, utilizando-se dos comandos já apresentados.

Sua estruturação se baseia na documentação de integração com Vue do CPS Elements. Embora detalhes possam ser obtidos em tal documentação, segue resumo do que foi realizado no projeto para que a integração funcione:

• Instalação do CPS Elements usando npm install @cps-elements/web, ficando então registrado no package.json;
• Configuração em vite.config.ts definindo que tags inciadas com cps- são elementos customizados, ao invés de componentes Vue;
• Importação do tema base light.css e chamada ao método setBasePath em src/main.ts;
• [Opcional] Registrada biblioteca de ícones adicional em src/main.ts usando o método registerIconLibrary, apenas como exemplo;
• Nos componentes Vue que utilizarão CPS Elements, basta importar cada componente desejado, como exibido em src/App.vue;
• [Opcional] Para auto-completação de código dos CPS Elements e seus atributos no VS Code, vide .vscode/settings.json.