The Vue3 Tutorial was previously published: Develop a Vue 3 + Element-Plus background management system “, the article mentioned that we will develop and open source a Vue 3 + Element Plus project for you to practice and learn, and then have been receiving messages and feedback, asking me when open source and so on, today finally can inform you, To complete! 🎉🎉 Open source! 🎉 🎉

If you think my writing is ok, please offer your precious praise 👍, which will be my motivation to continue writing! Thank you very much.

Vue3-admin Open source address

All the code, all the files are open source to the GitHub repository, and all the back end code is in the repository.

There is no hidden behavior, including the back-end API interface code is all open source, will not say which page is missing or an important function, this kind of thing does not exist, we have a look at the article and preview, feel good friends can continue to learn about this project.

Of course, I also hope that interested friends can find out the problems, some PR or issue, so that this open source project can reduce problems and keep progress.

Vue3-admin has created a code repository on Both GitHub and the domestic code cloud. If you are slow to access GitHub, you are advised to check out the project on Gitee. The two repositories will be updated in sync.

  • in GitHub : vue3-admin
  • in Gitee : vue3-admin

Vue3-admin Previews the address

The project was deployed to an online environment a week ago and can be accessed from the open source repository.

Because the bandwidth of the server is not very large, worried about everyone directly crowded the server, hope everyone do not visit together, ha ha ha.

Test process and test results, thank you for participating in the test

The testing process lasted about half a month. There were three rounds of testing in total. The first two rounds were self-testing and many problems were changed. The back is to send an article to introduce this project, and the project preview address and test account password published, let everyone start a point page, test function, there are still a lot of people to participate in the test part of this project, thank you here.

The following figure shows the login token records generated within a certain period of time, that is, each time someone logs in to the system, such a record will be generated, which is a large amount of data.

The token generation data from the launch of the website (i.e. last Monday) to the end of last week is summarized as follows:

Based on this data, it can be estimated that 200 ~ 300 people log in and test the vue3-admin project every day. However, the feedback to the problem is not a lot, there is no bug, maybe you test is not very deep, after the actual run code and detailed experience, there should be more problems, looking forward to your feedback.

The test process in a matter of laugh and cry

There is also a very angry thing, this thing I have mentioned many times before, really is very funny.

I do a lot of open source projects, and all of these projects have preview sites for you to use, so you can get a preview of the features, and I think that’s good for you, but there are always people who are weird and do weird things. There is still little room left on the vue3-admin preview site, and there is still little room left on the preview site. There is little room left on the preview site, and there is little room left on the preview site. There is little room left on the preview site, and there is little room left on the preview site.

Then I go to restore, and then commodity data, order data, user data why not deleted? Because I did not put the delete button in these modules, I also closed the order data on the first page, removed the commodity data on the first page, and disabled the user data on the first page, so I will recover these data from time to time.

This thing, to be honest, has existed since I did the first open source project in 2017, but it can not be solved, do not put the preview address, affect everyone’s experience, but put it, there are always some fools delete all data or change the password of the test account so that others can not test. Here, or hope you consciously a little bit, you can test delete function, but you don’t delete all, or you delete after adding a few data also line ah.

Major technology stack

The technology stack selection for the VUE3-admin project is as follows:

  • Vue 3.0
  • Element-Plus
  • Vite 2.0
  • Vue-Router
  • Echarts 5.0
  • Axios

The main technology stacks are Vue 3.0 and Element Plus. The official version of Vue 3.0 has been online for more than six months, and then I saw @iamkun post “🎉 Element UI for Vue 3.0 is here!” I wanted to use it to refactor an old backend management system I had written, and then I tried Vite 2.0.

Preview of the vue3-admin project

The preview is as follows:

  • The login page

  • Rotation diagram management

  • Classification management

  • List of goods

  • Commodities editor

  • The order management

  • The order details

Code contributions

Of course, this is the first version of VuE3-admin. Although it has been tested for several rounds, it is not ruled out that there will still be some problems. I also hope that you can put forward some optimization suggestions.

Of course, I hope you can contribute code to the project as follows:

  • The fork the code
  • Create your own branch
  • Commit and push the modified code to your repository at fork
  • Submit a pr

conclusion

Due to the lack of time, there is no time to explain the development process and some matters needing attention in detail. Just tell you through this simple article, Vue 3.0 + Vite 2.0 + VUe-Router 4.0 + Elements-Plus + Echarts 5.0 + Axios back-end management system has been developed. After full testing, it is open source for everyone to learn and practice. If there are any problems in the process, I also hope you can give me feedback. I will fix these problems as soon as possible.

Thank you for your checking, and then I hope you can help me make a fortune by clicking a Star or sharing it out so that more people can see this project. Thank you for your support.

Vue3-admin Source address:

  • in GitHub : vue3-admin
  • in Gitee : vue3-admin

In addition to indicate the reprint/source, all are the author’s original, welcome to reprint, but without the consent of the author must retain this paragraph of statement, and in the article page clearly given the original link, or reserve the right to seek legal responsibility.