Celeris Web

English | 简体中文

Introduction

Celeris Web is a free and open-source front-end development framework that utilizes the latest technologies, including Vue 3, Vite, and TypeScript. Its monorepo approach makes it easy to manage dependencies and collaborate on multiple projects, providing developers with a comprehensive solution for building modern web applications.

One of the standout features of Celeris Web is its integration with OpenAI's ChatGPT API, which provides access to powerful natural language processing capabilities. This integration allows developers to easily incorporate natural language processing into their applications, making it an ideal choice for projects that require this functionality.

Whether you're a seasoned developer or just starting out, Celeris Web offers a streamlined front-end development process that leverages the latest tools and techniques.

Get started with celeris-web today and experience a highly streamlined front-end development process that harnesses the power of the latest technologies, including cutting-edge natural language processing capabilities.

Features

• ⚡ Lightning fast: Built with Vue 3, Vite, and pnpm 🔥
• 💪 Strongly typed: Uses TypeScript 💻
• 📂 Monorepo approach: Makes it easy to manage dependencies and collaborate on multiple projects 🤝
• 🔥 Latest syntax: Uses the new <script setup> syntax 🆕
• 📦 Components auto importing: Automatically imports components 🚚
• 📥 APIs auto importing: Uses unplugin-auto-import to directly import Composition API and others 📨
• 💡 Official router: Uses Vue Router v4 🛣️
• 🎉 Loading feedback: Uses NProgress to provide page loading progress feedback 🔄
• 🍍 State management: Uses Pinia for state management 🗃️
• 📜 Chinese font preset: Includes a preset for Chinese fonts 🇨🇳
• 🌍 I18n ready: Ready for internationalization with locales 🌎
• ☁️ Netlify ready: Zero-config deployment on Netlify ☁️
• 🤖 Integration with OpenAI's ChatGPT API: for natural language processing 🤖

Coding Style

• @kirklin/eslint-config

Recommended IDE Setup

• 🌪️ WebStorm
• 💻 VSCode
• 💡 Volar

packages dependency relationship

 graph TD
   admin{admin}
   admin --> assets
   admin --> ca-components
   admin --> components
   admin --> constants
   admin --> directives
   admin --> hooks
   admin --> locale
   admin --> request
   admin --> styles
   admin --> types
   admin --> utils
   assets
   components
   components --> assets
   components --> ca-components
   components --> constants
   components --> styles
   components --> types
   components --> utils
   ca-components
   ca-components --> constants
   ca-components --> utils
   directives
   directives --> utils
   hooks
   hooks --> types
   locale
   locale --> constants
   locale --> types
   locale --> utils
   request
   request --> constants
   request --> locale
   request --> types
   request --> utils
   types
   types --> constants
   utils
   utils --> types  
   

Loading

To update the diagram above edit the README file and open a new PR with the changes.

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

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

Usage

Development

Just run and visit http://localhost:8888

pnpm run dev

Build

To build the App, run

pnpm run build

And you will see the generated file in dist that ready to be served.

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Docker Production Build

First, build the celeris-web image by opening the terminal in the project's root directory.

docker buildx build . -t celeris-web:latest

Run the image and specify port mapping with the -p flag.

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