19K+ Star！一款基于 Vue3 实现的后台管理系统！
<p>大家好，我是 <code>Java陈序员</code>。</p><p>今天，给大家推荐一款基于 Vue3 实现的后台管理系统前端模板框架，适合外包项目，实现快速交付！</p>
<blockquote>
<p>关注微信公众号：【Java陈序员】，获取<strong>开源项目分享、AI副业分享、超200本经典计算机电子书籍等。</strong></p>
</blockquote>
<h2 id="项目介绍">项目介绍</h2>
<p><code>vue-manage-system</code> —— 一套基于 Vue3 + Element Plus + TypeScript 实现的多功能的后台前端模板框架，适用于绝大部分的后台管理系统开发。</p>
<p><strong>功能特色</strong>：</p>
<ul>
<li>简洁至上：代码简洁，没有花里胡哨的封装，新手也可以快速上手</li>
<li>功能丰富：常用的后台管理系统功能基本囊括，满足大部分管理系统的需求</li>
<li>定制服务：二次开发上手简单，适合定制化的外包需求</li>
<li>组件多样：提供表单、水印、表格、图表、主题等功能完善的组件</li>
</ul>
<p><strong>技术栈</strong>：</p>
<ul>
<li>Vue3</li>
<li>Element Plus</li>
<li>Vite3</li>
<li>Pinia</li>
<li>TypeScript</li>
</ul>
<h2 id="系统截图">系统截图</h2>
<ul>
<li><strong>登录</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/vue-manage-system/img-20250321213139.png"></p>
<ul>
<li><strong>系统首页</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/vue-manage-system/img-20250321213403.png"></p>
<ul>
<li><strong>系统管理</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/vue-manage-system/img-20250321213441.png"></p>
<ul>
<li><strong>组件</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/vue-manage-system/img-20250321213746.png"></p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/vue-manage-system/img-20250321213839.png"></p>
<ul>
<li><strong>表格</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/vue-manage-system/img-20250321213938.png"></p>
<ul>
<li><strong>主题</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/vue-manage-system/img-20250321214130.png"></p>
<h2 id="快速上手">快速上手</h2>
<blockquote>
<p>需要安装 Node 版本 14.18.0+.</p>
</blockquote>
<p>1、克隆代码</p>
<pre><code class="language-bash">git clone https://github.com/lin-xin/vue-manage-system.git
</code></pre>
<p>2、进入项目目录</p>
<pre><code class="language-bash">cd vue-manage-system
</code></pre>
<p>3、安装依赖</p>
<pre><code class="language-bash">yarn install
# 如没有安装 yarn,可使用如下命令全局安装
npm install yarn -g
</code></pre>
<p>4、运行项目</p>
<pre><code class="language-bash">yarn dev
</code></pre>
<p>5、浏览器访问</p>
<pre><code class="language-bash">http://localhost:5173/
</code></pre>
<p>6、打包部署</p>
<pre><code class="language-bash">yarn build
</code></pre>
<p><code>vue-manage-system</code> 使用最新的 Vue3 技术栈构建，是一个通用的后台管理系统前端模板框架。除了通用的后台管理系统功能外，还内置了丰富的功能组件，十分适用于外包项目使用！</p>
<pre><code class="language-bash">项目地址：https://github.com/lin-xin/vue-manage-system
</code></pre>
<h2 id="最后">最后</h2>
<p>推荐的开源项目已经收录到 <code>GitHub</code> 项目，欢迎 <code>Star</code>：</p>
<pre><code>https://github.com/chenyl8848/great-open-source-project
</code></pre>
<p>或者访问网站，进行在线浏览：</p>
<pre><code>https://chencoding.top:8090/#/
</code></pre>
<p><img src="https://chen-coding.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240629100336.png"></p>
<p><strong>我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目</strong>。</p>
<p><strong>但是任何人在群里打任何广告，都会被 T 掉</strong>。</p>
<p><strong>如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群</strong>：</p>
<p><strong>关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群</strong>。</p>
<blockquote>
<p>大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！</p>
</blockquote>
<hr><br><br>
来源：https://www.cnblogs.com/codechen8848/p/18791484
頁:
[1]