Recently, DUE to the reasons of the project, I have been looking for a suitable front-end template. Before, I wrote the front-end page of Vue by myself, and I was tired of writing too much, because the functions were similar, so it was boring to write and write.
Therefore, in the new project, I want to look at the Vue backstage management template on the market, find a ready-made one, change the basic OK, the team also saves some trouble.
To be honest, Vue’s ecosystem is still quite rich, there are classic, new background management framework, I share with you here we focus on the comparison of three.
vue-element-admin
- GitHub address: github.com/PanJiaChen/…
- Panjiachen.github. IO/vue-Element…
This project is quite famous. When I started to do VHR, I knew about this project. At that time, this project was just developed and there were few stars, but now it has become a hegemon.
Vue-element-admin is a back-end front-end solution based on VUE and Element-UI implementation. It uses the latest front-end technology stack, built-in I18N internationalization solution, dynamic routing, authorization verification, refined the typical business model, provides a wealth of functional components, it can help you quickly build enterprise-level product prototype in the background.
It can be said that the function of this project is relatively complete, it will be some common functional modules such as authority management are done, sometimes, you will even feel that this project is a bit bloated.
Let’s take a look at an illustration:
This open source project was our final choice here for several reasons:
- This project was developed earlier, so it has fewer bugs and is relatively stable at present.
- The project is still very active, and the author is still improving it.
- Fully functional, compared with other projects, there is no disadvantage in function.
- ElementUI is used more often than other UI frameworks, which is important for a commercial project.
Of course, the use of open source projects can not completely meet their needs, this should be in the development, and then slowly overcome.
ant-design-vue-pro
- GitHub address: github.com/vueComponen…
- The demo is at preview.pro.loacg.com
This was also one of the key projects we compared at that time.
Ant Design Pro is an enterprise-class front-end/Design solution. Adhering to the Design values of Ant Design, Ant Design Pro is committed to continuing to build on the basis of Design specifications and basic components, extracting typical templates/business components/supporting Design resources. To further improve the experience of “users” and “designers” in the design and development process of enterprise-level background products. With the continuous feedback of the “designer”, the continuous iteration gradually precipitates and summarizes more design patterns and the corresponding code implementation.
Let’s take a look at the effect:
This project was also excellent, but it failed in the end, mainly for the following reasons:
- This project looks less “bloated” than vue-element-admin, which of course means it has less functionality.
- Ant Design itself has been around for a long time, but it has always been around React and only started supporting Vue last year, which is why this Ant Design Pro looks relatively simple.
- The permissions section of this project is very similar to vue-element-admin, so it is better to go directly to Vue-element-admin.
In other words, no matter which open source project is used, it is necessary to make the project fit their actual application scenarios. Few open source projects can be used directly. From this point of view, in fact, it doesn’t matter which one is used, anyway, they still need to change a lot of things. But since we could only choose one, we went with vue-element-admin, which knows Vue better.
iview-admin
- GitHub address: github.com/iview/iview…
- Demo address: admin.iviewui.com
Iview-admin is one of the members of the iView ecosystem. It is a front-end solution of the back-end management system based on Vue, which adopts the development mode of front and back end separation. Iview-admin2.0 was reconstructed from the 1.x version and replaced with Webpack4.0 + vue-cli3.0 as the basic development environment. Built in the development of background management system commonly used logic functions, and out-of-the-box business components, designed to enable developers to develop background management system at the minimum cost, reduce the amount of development.
Accustomed to ElementUI, it’s refreshing to take a peek at iView or Ant Design.
Take a look at what it looks like:
To be honest, these frameworks were so homogeneous that there was little difference except for the UI, so we ended up with the more classic Vue-element-admin.
We are mainly in these three for comparison, so here is mainly and you introduce these three, small partners if you have used other good, welcome to the message area oh ~
How to learn
Let me conclude by saying one more thing about how this front-end framework can be learned.
If you’re new to the front end and have scrubbed the Vue website but haven’t done a SPA app (or even heard of one), these three frameworks are challenging to get started with and I don’t particularly recommend using them to get started.
The reason for this is simply that all three of these front-end frameworks are professional front-end frameworks with a lot of integration that can easily confuse you if you’re new to them.
It is better to have done some SPA applications first, to have a basic grasp of the overall process of the front end, and then to learn these frameworks, relatively speaking, it will be a lot easier. Speaking of which, if you are interested, you can check out Songo’s micro Personnel Project video tutorial.