Recommend 20 recent 'hot” Vue projects (worth collecting)
This article will share with you 20 recent "hot" Vue projects for front-end workers. Collection equals learning. I hope it will be helpful to everyone.
We know that in interviews now, if you have contributed to open source projects on github
or other open source websites, you can often get a lot of extra points
I have also been paying more attention to Vue
related open source projects recently. I have collected some Vue projects that have been relatively "hot" recently, and I also recommend them to everyone. Let's take a look! [Related recommendations: vue.js tutorial]
Note: Listed in no particular order
1. vue-admin-better
CurrentlyStars
:11066
This month’s Stars
:300
is one Backend management system, open source version supports free commercial use, has 40
multiple single pages, RBAC
modelJWT
Permission control, good type definition, cross-platformPC
, mobile phone, tablet, back-end routing dynamic rendering
component library, Vue2
uses element-ui
, Vue3
There are element-plus
and ant-design-vue
, suitable for partners who are developing or want to use Vue element-ui/element-plus/ant-design-vue
GitHub
Address: https://github.com/chuzhixin/vue-admin-better
2. element-plus
CurrentlyStars
:13178
This month’s Stars
:505
A UI
component library for Vue3
; anyone who knows Vue
should know element
, element-plus
is the Vue3
version of element
If you are interested in TS
and Vue3
If you are interested, remember to check it out
GitHub address: https://github.com/element-plus/element-plus
Document address: https:// element-plus.gitee.io/zh-CN/
3. ant-design-vue
Currently Stars
:15818
This month’s Stars
:224
ant- design-vue
is the same as element-plus
. It is a relatively well-known and older component library that has been continued. It is also one of the component libraries recommended by You Yuxi many times. It is Ant Design
's Vue
implementation, the component style is synchronized with Ant Design
, the component's html
structure and css
style are also Keep it consistent, truly modify the style0
, and try to keep the componentAPI
as consistent as possible, support server-side rendering
GitHub address: https:// github.com/vueComponent/ant-design-vue/
Document address: https://next.antdv.com/docs/vue/ introduce-cn/
4. naive-ui-admin
CurrentlyStars
: 1421
This month’s Stars
: 360
Similar to vue-admin-better
, naive-ui-admin
is a mid- and back-end solution based on vue3
vite2
TS
, which uses the latest front-end technology stack. It also refines typical business models and pages, including secondary encapsulation components, dynamic menus, permission verification, granular permission control and other functions. It can help you quickly build enterprise-level middle and back-end projects
is a new Open source projects, if you are interested in the latest technologies of vue3
, vite2
and TS
, you can try the
GitHub address :https://github.com/jekip/naive-ui-admin
Preview address: https://naive-ui-admin.vercel.app/
5. eladmin-web
CurrentlyStars
:3445
Winning Stars
this month: 82
eladmin
’s front-end source code, this project is based on Spring Boot 2.1. 0
, Spring Boot Jpa
, Spring Security
, Redis
, Vue
's front-end and back-end separation background management system, permission control adopts RBAC
, menu dynamic routing
eladmin
Official document address of the project: https://el-admin.vip/
6. element
CurrentlyStars
:51464
This month’s Stars
:229
Needless to say, a Vue2
well-known UI
component library
GitHub address: https://github.com /ElemeFE/element
Official document: https://element.eleme.cn/#/zh-CN
##7 . homer
CurrentlyStars:
3594
Stars won this month:
329
yaml configuration file
GitHub address: https://github.com /bastienwirtz/homer
Currently
Stars:233
This month’s
: 142
is rapidly developed on multiple platforms UI
framework, fully compatible with nvue
, native rendering, compatible with Android, iOS
, WeChat applet, H5
, QQ
Mini Program, Baidu Mini Program, Alipay Mini Program, Toutiao Mini Program
Official documentation: https://uviewui.com
Currently
Stars:8200
This month’s
:513
Officially known for its speed, it is actually based on
vite2
TS
Currently
Stars:1063
This month’s
: 93
is a management-side template solution, which is based on vue3
,ts
and element-plus
, the projects are all written in the composition api
styleIf you want to understand the in-depth use of
, you can go and see See
Online demo address: https://admin-tmpl-test.rencaiyoujia .cn/
##11. vue-element-admin
CurrentlyStars
:73242This month’s
Stars
755Previous project
vue3-composition-admin
vue-element-admin project implementation
GitHub address: https://github.com/PanJiaChen/vue-element-admin
Online Demo address: https://panjiachen.github.io/vue-element-admin/#/dashboard
##12. vue3-antd- admin
CurrentlyStars:
1166Stars
won this month:
is based on
vue-cli5.x
/
vue3.x
ant-design-vue3.x
typescript hooks
Basic background management system templateRBAC
Permission system, JSON Schema
Dynamic form, dynamic table, beautiful lock screen interface GitHub address: https://github.com/buqiyuan/vue3-antd-admin
13. form-generator
CurrentlyStars:
5585 Earned
Stars
this month:
<p>A <code>Element UI
form design and code generator that can run the generated code directly in vue
projects based on Element
; it can also be exportedJSON
form, use the matching parser to parse JSON
into a real form
GitHub address: https://github.com/JakHuang/form- generator
Preview address: https://mrhj.gitee.io/form-generator/#/
14. varlet
CurrentlyStars
:1682
This month’s Stars
:298
It seems that I saw the author digging for gold text a few days ago. It is a Material design
style mobile component library based on Vue3
. You Yuxi mentioned it
GitHub address: https://github.com/haoziqaq/varlet
Document address: https://varlet.gitee.io/varlet-ui/#/zh- CN/home
##15. sub-web
CurrentlyStars:
1670
Stars this month:
141
vue-cli and
tindy2013/ subconverterThe configuration of the back-end implementation is automatically generated
GitHub address: https://github.com/CareyWang/sub-webDisplay address: https://sub -web.netlify.app/
16. vue2-manage
CurrentlyStars :
11375
:103
This project is a backend management system built by vue2 element-ui , is the management system of the backend project node-elm. All data is real data obtained from the server in real time, with real registration, login, data management, permission verification and other functions
Display address: https://cangdu.org/manage/#/
Currently
Stars:1675
Received
:194
is a free and open source middle and backend template that uses the latest vue3 vite2 Element-Plus TypeScript
and other mainstream technology development, out-of-the-box mid-end, back-end and front-end solutions, with supporting videos, documents and UI design
Preview address: http://yiming_chang.gitee.io/manages
##18. vuejs / docs
CurrentlyStars
:1492Stars
64
is the core document of
Vue3
GitHub address: https://github.com/vuejs/docs
Official website: https: //v3.vuejs.org/
19. PicGo
CurrentlyStars
:15480This month’s
Stars
422A URL for quickly uploading pictures and getting pictures
GitHub address: https://github.com/Molunerfinn/PicGo
Document address: https://picgo. github.io/PicGo-Doc/zh/guide/
## Official website: https://molunerfinn.com/PicGo/
20. daisyui
CurrentlyStars:
6913 This month’s
Stars
:
##daisyUI
may be unfamiliar, it is the
Components of
,
Tailwind CSS is actually a
DSL carried by
token list syntax (
HTML class), used to write Style declaration equivalent to
CSS/Sass/LessGitHub address: https://github.com/saadeghi/daisyui
Document address: https ://daisyui.com/
Official website address: https://daisyui.com/
THE END
For more programming-related knowledge, please visit: Programming Video! !
The above is the detailed content of Recommend 20 recent 'hot” Vue projects (worth collecting). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

There are three ways to refer to JS files in Vue.js: directly specify the path using the <script> tag;; dynamic import using the mounted() lifecycle hook; and importing through the Vuex state management library.

The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.

Vue.js has four methods to return to the previous page: $router.go(-1)$router.back() uses <router-link to="/" component window.history.back(), and the method selection depends on the scene.

Implement marquee/text scrolling effects in Vue, using CSS animations or third-party libraries. This article introduces how to use CSS animation: create scroll text and wrap text with <div>. Define CSS animations and set overflow: hidden, width, and animation. Define keyframes, set transform: translateX() at the beginning and end of the animation. Adjust animation properties such as duration, scroll speed, and direction.

Pagination is a technology that splits large data sets into small pages to improve performance and user experience. In Vue, you can use the following built-in method to paging: Calculate the total number of pages: totalPages() traversal page number: v-for directive to set the current page: currentPage Get the current page data: currentPageData()

You can query the Vue version by using Vue Devtools to view the Vue tab in the browser's console. Use npm to run the "npm list -g vue" command. Find the Vue item in the "dependencies" object of the package.json file. For Vue CLI projects, run the "vue --version" command. Check the version information in the <script> tag in the HTML file that refers to the Vue file.
