推荐10个基于Vue3.0全家桶的优秀开源项目

news2025/1/30 16:05:05

目录

PPTist

vue-next-admin

Vue vben admin

VUE3-MUSIC

vue-pure-admin

vue3-composition-admin

newbee-mall-vue3-app

Element Plus

vue3-bigData

cool-admin-vue


今天来分享 10 个基于 Vue3.0 全家桶的优秀开源项目!

PPTist

PPTist 是一个基于 Vue3.x + TypeScript + Pinia + Ant Design Vue + Canvas  的在线演示文稿(幻灯片)应用,还原了大部分 Office PowerPoint 常用功能,实现在线PPT的编辑、演示,支持导出PPT文件。

 

Github:https://github.com/pipipi-pikachu/PPTist

vue-next-admin

vue-next-admin 是一个基于 Vue3.x + Typescript + Vite + Element plus + Vuex 等,适配手机、平板、PC 的后台开源免费模板库。

 

Github:https://github.com/lyt-Top/vue-next-admin

Vue vben admin

Vue Vben Admin 是一个开源的中后台模版。使用了最新的 Vue3 + Vite + TypeScript + Pinia + Vue Router 等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考。

 

Github:https://github.com/vbenjs/vue-vben-admin

VUE3-MUSIC

VUE3-MUSIC 是一个基于 Vue 3 + TypeScript + Vite + Pinia + Vueuse 开发的音乐播放器,界面模仿QQ音乐 Mac 客户端,支持黑夜模式。

 

Github:https://github.com/SmallRuralDog/vue3-music

vue-pure-admin

vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版(兼容移动端)。使用 Vue3 + Vite + Element Plus、TypeScript + Pinia + Tailwindcss 等主流技术开发。

 

Github:https://github.com/xiaoxian521/vue-pure-admin

vue3-composition-admin

vue3-composition-admin 是一个管理端模板解决方案,它基于 Vue3、TypeScript、Vuex、Vue Router、Element plus,项目都是以 composition api 风格编写。

 

Github:https://github.com/RainManGO/vue3-composition-admin

newbee-mall-vue3-app

newbee-mall-vue3-app 是一个基于 Vue3 + Vue Router4 + Vuex4 + Vant3 的大型单页面商城项目。商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。

 

Github: https://github.com/newbee-ltd/newbee-mall-vue3-app

Element Plus

Element Plus 是一个基于 Vue 3 + Vite + TypeScript + Vitest 的面向设计师和开发者的组件库。 

 

Github:https://github.com/element-plus/element-plus

vue3-bigData

vue3-bigData是一个可视化系统,基于 Vue3.0 + Vuex + Vue Router + TypeScript + Echarts实现,包括各种可视化图表。

 

Github:https://github.com/biubiubiu01/vue3-bigData

cool-admin-vue

cool-admin 是一个基于  Vue3.x + Typescript + Vite + Element plus 的后台权限管理系统,模块化、插件化、极速开发 CRUD,方便快速构建迭代后台管理系统。

 

Github:https://github.com/cool-team-official/cool-admin-vue

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407674.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Vue路由(router)进一步详解】

Vue路由(router)进一步详解query属性具体实例代码如下:params属性具体实例代码如下:props属性replace属性编程式路由导航路由缓存具体代码:总结本篇文章主要针对已经掌握Vue路由(router)基础以及…

Vue业务组件封装(二)Form表单

前言 这个系列主要是分享自己在工作中常用到的业务组件,以及如何对这些组件进行有效的封装和封装的思路。注:都是基于element ui进行二次封装。 封装组件的基本方法就是通过props和emit进行父子组件的传值和通信。利用插槽、组件等增加组件的可扩展性和复…

JavaScript实现留言板

目录 1.案例说明: 2.html部分 3.css部分 4.js代码 5.全部代码 6.效果图: 1.案例说明: 利用JavaScript、css以及html制作一个简易的留言板 要求在页面文本框中输入一些文字之后,点击“提交”按钮,就可以让输入的…

React+Mobx|综合项目实践(附项目源码、地址)

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 Reac

【学姐面试宝典】前端基础篇Ⅳ(JavaScript)

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 文章目录webpack 的作用什么是按需加载如何理解前端模块化讲讲 JS 的语…

npm i 报错及解决方案

目录报错案例1报错案例2报错案例3报错案例4报错案例5报错案例1 npm ERR! Cannot read properties of null (reading pickAlgorithm)解决方案:清理缓存后再次安装 npm cache clear --force报错案例2 npm ERR! gyp info it worked if it ends with ok ... npm ERR!…

前端使用lottie-web,使用AE导出的JSON动画贴心教程

Lottie简介 官方介绍:Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovie导出为json格式),支持web、ios、android、flutter和react native。 在web端,lottie-web库可以解析导出的动画json文件,并将其…

【博主推荐】html好看的图片轮播多种风格(源码)

html好看的图片轮播多种风格所有轮播图动态效果展示1.普通自带按钮切换轮播图1.1 效果展示1.2 源码2.自动切换图片2.1 效果展示2.2 源码3.鼠标拖动切换图片3.1 效果展示4.数字按钮拖动切换图片4.1 效果展示5.图片带缩略图5.1 效果展示6.上下拖动切换图片6.1 效果展示7. 3D切换图…

X-Frame-Options简介

最近安全检查,发现没有保障和避免自己的网页嵌入到别人的站点里面,于是需要设置X-Frame-Options增加安全性。 网上查了查资料,这里记录一下。 可以使用下面工具进行验证:Clickjacking Tool | Test | UI Redressing 1、X-Frame-Op…

3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景|判断数组里有没有某对象,有不添加,没有则添加到数组

3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景 一、当数组中的数据是简单类型时: 应用js中的indexof方法:存在则返回当前项索引,不存在则返回 -1。 var arr[1,2,3,4]var str2// …

ECharts设置双x轴

下面给大家分享一下ECharts的几种功能,循序渐进地实现一个复杂的曲线图。 V1.0: 代码: let option {title: { text: V1.0 },legend: { data:[销量] },// x轴的数据xAxis: {data: ["王","胡歌","曾小贤",&q…

Vue3使用axios的配置教程详解

1.安装 npm install --save axios vue-axios2.在src根目录创建service文件夹。然后创建axios.js 2.1在axios.js添加拦截器,请求拦截:initAxios.interceptors.request;响应拦截:initAxios.interceptors.response import axios from "axios";const initAxios axios.…

用idea创建vue项目

目录 一、安装node.js (1)下载安装包 (2)测试node.js是否安装成功 (3)安装vue和全局vue-cli 二、idea安装vue.js插件 三、创建vue项目 四、修改配置文件 五、配置idea运行的环境 一、安装node.js …

ERROR: npm v9.4.1 is known not to run on Node.js v8.13.0.

前面全是废话,大家可以直接看序号8下面的nvm的命令以及序号11之后的问题解决,希望能帮助到你们!是个什么问题呢?昨天领导给了个前后端分离的项目,让不才我搭建一下环境,我兴高采烈的拿着项目搭建手册按照文…

微信小程序开发 app.json全局配置

JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。app.json 是当前小程序的全局配置,可以通过app.json对小程序项目进行设置所有页面路径、窗口外观、界面表现、底部 tab 等。{"pages": ["pages/index/index…

vue中实现文件批量打包压缩下载(以及下载跨域问题分析)

上次做了一个选择多个数据生成多个二维码并下载,当时项目催的紧,就简单写了个循环生成二维码下载,一次性会下载很多文件,特别难整理; 刚好这次项目又遇到类似这种功能,需要一次性批量下载多个文件&#xf…

浅谈uniapp的flex布局

文章目录1 flex布局1.1 flex-direction1.2 flex-wrap1.3 justify-content1.4 align-items1.5 align-content属性1.6 其他项目属性1.6.1 order属性1.6.2 flex-grow属性1.6.3 flex-shrink属性1.6.4 flex属性1 flex布局 ​ flex是Flexible Box的缩写,意为”弹性布局”…

TypeError: this.$message is not a function报错情况解决

在最近负责的一个前端项目中,使用this.$message报错了,之前也没注意,然后这次抽空看了一下问题 报错原因是因为我用了这种提示写法: 首先,我最开始是用基础写法: 但是这种写法有个弊端,就是如…

【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

⌚️⌚️⌚️个人格言:时间是亳不留情的,它真使人在自己制造的镜子里照见自己的真相! 📖Git专栏:📑Git篇🔥🔥🔥 📖JavaScript专栏:📑js实用技巧篇…

腾讯地图api使用——地图选点自动定位到当前位置

WebService API | 腾讯位置服务 用户在使用腾讯地图api时,需先申请腾讯位置服务API Key,该key在调用时用于唯一标识开发者身份。 1.自动获取当前位置 引入以下js文件 https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js //获…