celeris web

Celeris Web

Inglês | 简体中文

Introdução

Celeris Web é uma estrutura de desenvolvimento front-end gratuita e de código aberto que utiliza as tecnologias mais recentes, incluindo Vue 3, Vite e TypeScript. Sua abordagem monorepo facilita o gerenciamento de dependências e a colaboração em vários projetos, fornecendo aos desenvolvedores uma solução abrangente para a construção de aplicativos web modernos.

Quer você seja um desenvolvedor experiente ou esteja apenas começando, o Celeris Web oferece um processo de desenvolvimento front-end simplificado que aproveita as ferramentas e técnicas mais recentes.

Comece hoje mesmo com o celeris-web e experimente um processo de desenvolvimento front-end altamente simplificado que aproveita o poder das tecnologias mais recentes, incluindo recursos de processamento de linguagem natural de ponta.

Características

• ⚡ Muito rápido: desenvolvido com Vue 3, Vite e pnpm
• ? Fortemente digitado: usa TypeScript
• Abordagem Monorepo: Facilita o gerenciamento de dependências e a colaboração em vários projetos?
• Sintaxe mais recente: usa a nova sintaxe <script setup>?
• ? Importação automática de componentes: importa componentes automaticamente?
• ? Importação automática de APIs: usa unplugin-auto-import para importar diretamente API de composição e outros?
• Roteador oficial: usa Vue Router v4 ?️
• ? Feedback de carregamento: usa NProgress para fornecer feedback sobre o progresso do carregamento da página
• ? Gestão estadual: Usa Pinia para gestão estadual ?️
• Predefinição de fonte chinesa: Inclui uma predefinição para fontes chinesas ??
• ? Pronto para I18n: Pronto para internacionalização com localidades?
• ☁️ Pronto para Netlify: implantação zero-config no Netlify ☁️

Estilo de codificação

• @kirklin/eslint-config

Configuração IDE recomendada

• ?️WebStorm
• Código VSC
• Volar

relacionamento de dependência de pacotes

 gráfico TD
   administrador{administrador}
   admin -> admin-api
   administrador -> ativos
   admin -> componentes ca
   administrador -> componentes
   administrador -> constantes
   admin -> diretivas
   admin -> ganchos
   administrador -> localidade
   administrador --> solicitação
   administrador -> estilos
   administrador -> tipos
   administrador -> utilitários
   ativos
   componentes
   componentes -> ativos
   componentes -> componentes ca
   componentes -> constantes
   componentes -> estilos
   componentes -> tipos
   componentes -> utilitários
   componentes ca
   componentes ca -> constantes
   componentes ca -> utilitários
   diretivas
   diretivas -> utilitários
   ganchos
   ganchos -> tipos
   localidade
   localidade -> constantes
   localidade -> tipos
   localidade -> utilitários
   solicitar
   solicitação -> constantes
   solicitação --> localidade
   solicitação --> tipos
   solicitação --> utilitários
   tipos
   tipos -> constantes
   utilitários
   utilitários -> tipos
   API de administração
   admin-api -> constantes
   admin-api -> tipos

Para atualizar o diagrama acima edite o arquivo README e abra um novo PR com as alterações.

Comentários bilíngues no código

No design do Celeris Web, enfatizamos a legibilidade e a aprendizagem do código. Para conseguir isso, cada função é equipada com comentários bilíngues em chinês e inglês, garantindo que os desenvolvedores, independentemente de seu idioma nativo, possam compreender e aprender facilmente com o código.

Por que escolher comentários bilíngues?

1. Colaboração Global: Em equipes multiculturais, os comentários bilíngues promovem uma melhor comunicação e colaboração, garantindo que os membros da equipe possam compreender com precisão a funcionalidade e a implementação do código.

2. Aprendizagem conveniente: Para iniciantes, os comentários bilíngues fornecem um ambiente de aprendizagem mais fácil de usar, ajudando-os a compreender rapidamente a lógica e a estrutura do código.

3. Amigável ao desenvolvedor: Estamos comprometidos em criar um ambiente amigável ao desenvolvedor, e os comentários bilíngues são uma medida crucial que tomamos para atingir esse objetivo.

Exemplo:

 /**
 * 打开一个新的浏览器窗口
 * Open a new browser window
 *
 * @param {string} url - 要在新窗口中打开的 URL
 * The URL to open in the new window
 *
 * @param {object} options - 打开窗口的选项
 * Options for opening the window
 * @param {string} options.target - 新窗口的名称或特殊选项，默认为 "_blank"
 * @param {string} options.features - 新窗口的特性（大小，位置等），默认为 "noopener=yes,noreferrer=yes"
 */
export function openWindow ( url : string , { target = "_blank" , features = "noopener=yes,noreferrer=yes" } : {
  target ?: "_blank" | "_self" | "_parent" | "_top" ; // 新窗口的名称或特殊选项，默认为 "_blank"
  features ?: string ; // 新窗口的特性（大小，位置等），默认为 "noopener=yes,noreferrer=yes"
} = { } ) {
  window . open ( url , target , features ) ;
}

Através desses comentários bilíngues, nosso objetivo é fornecer aos desenvolvedores uma experiência de codificação mais agradável e eficiente, tornando o Celeris Web um modelo de front-end realmente fácil de aprender e mergulhar.

Benefícios do Design Monorepo

1. Gerenciamento mais fácil de dependências: Monorepo centraliza o gerenciamento de dependências para todos os projetos, evitando conflitos de versão entre diferentes projetos e tornando o gerenciamento geral de dependências mais claro e simples.

2. Compartilhamento e reutilização de código: Diferentes projetos podem facilmente compartilhar e reutilizar código, reduzindo a carga de trabalho de desenvolvimento redundante. Isso é altamente benéfico para manter a consistência do código e melhorar a eficiência do desenvolvimento.

3. Construção e implantação unificadas: Monorepo simplifica todo o processo de desenvolvimento por meio de um fluxo de trabalho unificado de construção e implantação, reduzindo a complexidade de configuração e gerenciamento e melhorando a eficiência da colaboração dentro da equipe de desenvolvimento.

4. Controle de versão unificado: Com todos os projetos no mesmo repositório de controle de versão, o gerenciamento de versão se torna mais consistente e controlável. Isso ajuda a equipe a rastrear e lidar melhor com problemas relacionados à versão. O design do Monorepo posiciona o Celeris Web não apenas como um modelo de sistema administrativo, mas também como um modelo web frontend para desenvolvimento rápido de produtos C-end. Com o Celeris Web, a jornada de desenvolvimento frontend fica ainda mais descontraída e divertida!

Filosofia de Design: Quebrando os Limites do Gerenciamento Administrativo, Focando na Experiência do Usuário C-End

No mercado, a maioria dos modelos de front-end atendem principalmente às necessidades dos usuários finais B, fornecendo recursos poderosos e interfaces flexíveis para sistemas de gerenciamento empresarial (Admin). Porém, poucos templates consideram as características dos produtos C-end em seu design, e é aí que o Celeris Web inova.

Quebrando os limites do gerenciamento administrativo:

Os sistemas tradicionais de gerenciamento administrativo priorizam a exibição de dados e o gerenciamento de negócios, enquanto os produtos C-end enfatizam a experiência do usuário e o apelo visual. Reconhecendo as demandas dos usuários C-end por interfaces esteticamente agradáveis ​​e interações suaves, o Celeris Web não apenas oferece recursos robustos de gerenciamento de backend, mas também se concentra em elevar a interface frontend a um nível mais alto de satisfação do usuário.

Foco na experiência do usuário C-End:

Celeris Web não é apenas um modelo para sistemas administrativos; é um modelo web frontend que prioriza a experiência do usuário para produtos C-end. Nosso objetivo é nos libertar das restrições dos sistemas administrativos tradicionais, introduzindo princípios de design inovadores, garantindo que os produtos C-end apresentados no frontend proporcionem uma excelente experiência ao usuário.

Recursos destacados:

• Design de UI elegante e estético: Priorizamos a estética visual, utilizando linguagens de design modernas para tornar a UI do Celeris Web não apenas uma compilação de recursos, mas um banquete visual que cativa os usuários C-end.
• Experiência de interação amigável: Considerando os hábitos e necessidades dos usuários C-end, o Celeris Web enfatiza o design interativo. Através de efeitos de animação suaves e operações intuitivas, os usuários podem experimentar prazer e conveniência sem precedentes.
• Temas personalizáveis ​​para personalização: Reconhecendo a diversidade de produtos C-end, oferecemos um rico conjunto de opções de personalização de temas, permitindo que cada projeto C-end tenha uma aparência única que se alinha perfeitamente aos requisitos personalizados.

Com esta filosofia de design única, a Celeris Web se esforça para explorar novas possibilidades no desenvolvimento frontend, injetando mais vitalidade e criatividade nos produtos C-end. Acreditamos que tal inovação conquistará o reconhecimento generalizado dos utilizadores e contribuirá para um maior valor do produto. No mundo do Celeris Web, o desenvolvimento front-end transcende os limites dos sistemas administrativos, incorporando elementos mais interessantes relacionados à experiência do usuário.

Experimente agora!

Modelo GitHub

Crie um repositório a partir deste modelo no GitHub.

Clonar para local

npx degit kirklin/celeris-web my-vite-app
cd my-vite-app
pnpm i

Uso

Desenvolvimento

Basta executar e visitar http://localhost:8888

pnpm run dev

Construir

Para construir o aplicativo, execute

pnpm run build

E você verá o arquivo gerado em dist pronto para ser veiculado.

Implantar no Netlify

Vá para Netlify e selecione seu clone, OK ao longo do caminho, e seu aplicativo estará no ar em um minuto.

Construção de produção do Docker

Primeiro, construa a imagem celeris-web abrindo o terminal no diretório raiz do projeto.

docker buildx build . -t celeris-web:latest

Execute a imagem e especifique o mapeamento de portas com o sinalizador -p .

docker run --rm -it -p 8080:80 celeris-web:latest

História das Estrelas