Kilyicms is a front-end and back-end separation/open source management system base solution , based on Vue3.5+, TypeScript, Element Plus, Pinia and Vite5.4+ and other mainstream technologies , support for 16 language switching . Functional modules in the continuous improvement ...
| Location | Account | Link |
|---|---|---|
| vercel | admin or user | Link |
| github-pages | admin or user | Link |
- Completely free: But we hope you'll give it a star!!!
- Very simple: No complex encapsulations, no complicated type gymnastics, ready to use.
- Detailed comments: Each configuration item has as detailed comments as possible.
- Latest dependencies: Regular updates to all third-party dependencies to the latest version.
- Organized code: Unified code style, naming conventions, and comment style.
- Vue3: Uses the latest Vue3 Composition API with script setup.
- Element Plus: The Vue3 version of Element UI.
- Pinia: The so-called Vuex5.
- Vite: It's really fast.
- Vue Router: Routing functionality.
- TypeScript: A superset of JavaScript.
- PNPM: A faster and disk space-saving package manager.
- Scss: Consistent with Element Plus.
- CSS Variables: Mainly controls the layout and color of the project.
- ESlint: Code linting.
- Prettier: Code formatting.
- Vue-i18n：Simple, powerful international plugin.
- Axios: Handles network requests (already encapsulated).
- UnoCSS: A high-performance, highly flexible, on-demand atomic CSS engine.
- Mobile Compatibility: Layouts compatible with mobile device resolutions.
- User Management: Login, logout demo.
- Permission Management: Page-level permissions (dynamic routes), button-level permissions (directive permissions, permission functions), route guards.
- Multiple Environments: Development (development), testing (test), production (production).
- Multiple Themes: Light, dark, deep blue; three theme modes.
- Multiple Layouts: Left sidebar, top bar, mixed layout; three layout modes.
- Multi-language: 16 language switches, synchronization between built-in languages of element-plus components and vue-i18n language switches.
- Error Pages: 403, 404 error pages.
- Dashboard: Displays different dashboards based on different users.
- Other Built-in Features: SVG support, dynamic sidebar, dynamic breadcrumbs, tab navigation, screen full-screen mode, adaptive collapsed sidebar, hooks (Composables).
- Global SVG component encapsulation - usability (vite configuration) 🎈
- Project theme switching (light/dark/dark-blue) with UI component library support 🎈
- Three environment configurations (development, testing, production) 🎈
- Button debounce (prevent rapid clicks) 🎈
- Encapsulate requests to avoid multiple invalid requests (add throttling checksums) 🎈
- Two full-screen mode switching (menu area and content area)🎈
- Enable debugging in production environment - encapsulated hooks - 🎈
- Backend Permissions, Routing Permissions, Page Permissions, Button Permissions 🎈
- Optimization of right mouse button management in background tabs🎈
- Login user_name watermark settings, local and global watermark case demo🎈
- Upload Excel sheet + parsing + printing
- PDF preview + printing
- Rich text dynamic content editing + image upload + video upload
- Global custom skeleton screen animation loading component wrapper
- Page Load Progress Bar Component Wrapper 🎈
- Request loading encapsulation (two types: hooks 🎈, encapsulation in request method for global loading animation 🎈)
- Necessary component global registration 🎈
- Multi-language management, multi-language switching components, element-plus built-in language synchronization switching, batch translation program writing 🎈
- Front-end routing separation, arbitrary routing, constant routing, asynchronous routing 🎈
- Integrated label iconify with unocss 🎈
- Custom directive global encapsulation (currently permission directive) 🎈
- Frontend code automated Jenkins deployment or deployment via Node.js CLI
- Three types of captcha validation (frontend component, frontend-backend numeric or graphical captcha validation, frontend-backend Cloudflare browser fingerprint automatic CAPTCHA)
- Large file chunk upload (standalone upload, upload in rich text user)
- Micro-frontend architecture construction, dynamic route addition, dynamic subsystem addition, properly handle CSS sandboxing
- Modular development 🎈
- Permission control
- Login JWT validation 🎈
- Two types of captcha validation (frontend-backend numeric or graphical captcha validation, frontend-backend Cloudflare browser fingerprint CAPTCHA), automatically push messages to frontend after a certain time
- Sensitive information encryption (password + address... using RSA encryption library as a reference)
- Redis rate limiting
- Jenkins automated deployment
- Docker
- Backend multi-language switching based on frontend requests
Ensure that you have installed Node.js and npm (or use pnpm/yarn). Then run the following commands to install the project dependencies:
git clone https://github.com/durunsong/kilyicms.git
cd kilyicms (Frontend project)
cd server (Backend project)# Setup
1. Install the recommended plugins from the .vscode directory.
2. Node version 18.x or 20+
3. PNPM version 8.x or latest version
# Clone the project
git clone https://github.com/durunsong/kilyicms
# Enter the project directory
cd kilyicms
# Install dependencies
pnpm i
# Start the development server
pnpm run dev
# Preview the test environment
pnpm preview:test
# Preview the production environment
pnpm preview:prod
# Build the test environment
pnpm build:test
# Build the production environment
pnpm build:prod
# Code formatting
pnpm lint
featAdd new business functionalityfixFix business issues/bugsperfOptimize performancestyleChange code style, no impact on functionalityrefactorRefactor coderevertRevert changestestTest-related changes, no business logic changesdocsDocumentation and comment-related changeschoreUpdate dependencies/modify scaffold configuration and other trivial tasksworkflowWorkflow improvementsciContinuous integration-related changestypesType definition file changeswipWork in progressdeletedeletes an obligation code
- This project utilizes the vercel deployment, so you need scientific Internet access to access the normal
- As vercel and github subdomain can not setcookie, so the project manually set the cookie, token is explicitly transferred set in the cookie, in the formal project need to modify this part, the back-end part of the setcookie code, you can refer to!
Click here to visit my other repository
It's not easy to get stars for a small project. If you like this project, feel free to support it with a star! This is the only motivation for the author to keep maintaining it (whisper: after all, it's free).
Let me know if you need any modifications!