Vue3+Ts+Vite project (Table of Contents) - How to build a Vue3 backend management system from scratch

Overview

Either an open source project, a Bilibili project, or a company project, everyone may come into contact with the Vue3 project template . After looking at the company template and the Vue-pure-admin open source template, I have always been in a state of half-understanding, so I learned from the pain and decided to build it from scratch myself , knowing that I have to do this! ! !
The project built this time will include common project template functions , such as the use and modularization of vue-router, the use and modularization of pinia, the introduction of element-plus components and the secondary packaging of some components (such as upload upload components, menu Menu component, breadcrumb component), Chinese and English switching, one-click skin change, echarts usage and data visualization large screen practice, svg component encapsulation and its use, etc... I will present all the key steps in the form of a blog , hoping to be helpful to you.

Technology stack: Vue3 Family Bucket (Vue3.0 + TypeScript + Vite + Pnina + Element+Plus)
Environment : Node.js (V16.14.0)
Expectation: Complete the Vue3.0 background management system including common functions
Blog : Ten updates have been made so far The remaining articles, as the project is built, the blog will continue to be updated
for reference : Vue-Pure-Admin: https://yiming_chang.gitee.io/pure-admin-doc/

---

1. Collection of series of articles (continuously updated~)

1. Vue3+Ts+Vite project (Part 1) - Use Vite to create a Vue3 project
2. Vue3+Ts+Vite project (Part 2) - Introducing Element-Plus and configuring components to automatically import on demand
3. Vue3+Ts+Vite project (Part 3) - configure husky, stylelint, commitlint, and configure git to submit code verification
4. Vue3+Ts+Vite project (Part 4) - Configure @ path alias and implement @ instead of /src
5. Vue3+Ts+Vite project (Part 5) - Configure the router to implement routing jump and complete routing modularization
6. Vue3+Ts+Vite project (Part 6) - Installation and use of nprogress to implement route loading progress bar
7. Vue3+Ts+Vite project (Part 7) - Custom scroll bar style
8. Vue3+Ts+Vite project (Part 8) - Page switching transition animation
9. Vue3+Ts+Vite project (Part 9) - encapsulating the left menu bar component based on el-menu
10. Vue3+Ts+Vite project (Part 10) - el-breadcrumb secondary encapsulation to implement breadcrumb components and breadcrumb transition animation
11. Vue3+Ts+Vite project (Part 11) - Project startup loading loading effect
12. Vue3+Ts+Vite project (Part 12) - echarts installation and use, vue3 project echarts component packaging
13. Vue3+Ts+Vite project (Part 13)—Configuring Element-Plus theme color
14. Vue3+Ts+Vite project (Part 14) - Install vue-i18n and configure Chinese and English switching to complete internationalization
15. Vue3+Ts+Vite project (Part 15) - Detailed explanation of the installation and use of tailwindcss, how to realize css atomization

---

2. Project renderings

2.1 Log in and register

2.2 Home page

2.3 Switch between Chinese and English

---

3. Like and collect to avoid getting lost. If you have any questions, please feel free to discuss them in the comment area.