English | 中文

---

I'm a front-end novice and I don't have much time. I just write and see how I can deal with it. If you like it, you can click Start.

It is expected that everything will be completed within 24 years, and at least one front-end + one back-end will be developed.

1. Basic introduction

1.1 Project Introduction

It was originally planned to implement the vue version of arco-design-pro, but the official said that the vue version will be launched in December 2021, so this project will not completely copy arco-design-pro. It is envisioned to develop a mid- and back-end front-end project that can be used in a production environment, and will develop multiple back-ends for everyone to choose from.

• Old version
  • Online preview
    （Please use Chrome to open）
  • Github address
• New version
  • Online preview
  • Document address Under development

1.2 Do you have any good ideas? Issues can be raised

2. Instructions for use

2.1 Develop

# Clone project
git clone https://github.com/LLiuHuan/arco-design-pro-vue.git

# Enter the project directory
cd arco-design-pro-vue

# pnpm

# Installation dependence
pnpm install

# Start service
pnpm dev

3. Project screenshot

Not done yet, will do it after the function is perfected

4. Back end

I haven’t started working on it yet, but I’m planning to work on multiple backends for everyone to choose from.

It mainly depends on the time, hahaha

Develop in the following order

1. Backend based on Go language, using Gin framework
2. Backend based on Go language, microservice form
3. Backend based on Java language, using Spring Boot framework
4. Backend based on Java language, microservice form
5. Backend based on Rust language, using Actix framework
6. Backend based on Node.js language, using Koa framework
7. Backend based on Python language, using Flask/Django framework

5. Update log (not very good at it, hahaha)

CHANGELOG

6. Plan

0x01. All features

0x01.1 Basic function

• Light/Dark/Follow System
• Internationalization (Chinese and English)
• Full screen
• Login page
• Registration page
• Forgot the password
• Search
• Notification
• Lock screen
• Project configuration
• Cache page

0x01.2 Dashboard

• Analysis page
• Monitoring page
• Workbench page

0x01.3 Document

• Vue documentation
• Vue documentation (new version)
• Vite Documentation
• Baidu (external link)
• Documentation (external link)

0x01.4 Component example

• Button component
• Card component
• Table component
• Form component
• Chart component
  • ECharts
  • D3
• Map component
• Video component
• Editor component
  • Rich text component
  • Markdown
  • Yarm
  • Json component
• Swiper component
• Icon component
• Avatar upload component
• Image cropping component
• Upload component
• QR code component
• Password strength component
• Animation component
• Digital animation components
• Rolling component
• Popup component
• Lazy loading component
• Verification component
  • Drag verification
  • Picture restore
• Loading component
• Table selector component

0x01.5 Functional example

• Websocket test
• Login expired
• Error log
• Error log collection
• Print
• Tab operation
• Right click menu
• File download
• Picture Preview
• Watermark
• Full screen
• QR code
• Error log
• Tab with parameters
• Third party login
• Dynamic skin exchange
• Breakpoint continuation

0x01.6 Permissions example

• Based on front-end permissions
  • Page level permissions
  • Button level permissions
  • Front-end permission test page
• Based on backend permissions
  • Page level permissions
  • Button level permissions
  • Backend permission test page

0x01.7 System Management

• User Management
• Role management
• Menu management
• Menu management2
• Department management
• Dictionary management
• Parameter management
• Notification management
• Operating log
• Login log
• Online user
• Timing task
• Service monitoring
• System restart
• Change Password
• API management

0x01.8 Page

• Form page
  • Basic form
  • Stepping form
  • Advanced form
• Details page
  • Basic details page
  • Advanced detail page
• Result page
  • Successful page
  • Failed page
• Personal page
  • Personal center
  • Personal settings
• Abnormal pages
  • 403
  • 404
  • 500
  • Network Error
  • No data
• List page
  • Standard list
  • Card list
  • Search list

0x01.9 Graphic editor ?

• Flow chart

0x01.10 Guide pages

• Guide pages

0x01.11 About

7. Project structure

I’ll add it later, it’s not decided yet, it will mainly be based on function.

Thank you

License

Ths project is MIT licensed.