The latest articles on DEV Community by 程序猿视觉 (@vpanda666). https://dev.to/vpanda666 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F880295%2Fc09c2fbc-66a0-4975-9243-6e5d70111726.png https://dev.to/vpanda666 en 程序猿视觉 Tue, 21 Jun 2022 10:21:58 +0000 https://dev.to/vpanda666/simple-and-beautiful-admin-managementvue3elementpluspiniaechart-1j8a https://dev.to/vpanda666/simple-and-beautiful-admin-managementvue3elementpluspiniaechart-1j8a <blockquote> <p>TodoAdmin-Vue:It is an integrated management back-end template solution. The project uses TS script language and is based onVue 3.2+/Vue-cli 5.0+/Vue-router 4.0+、Axios0.2.7+、Element-plus 2.2+、Pinia 2.0+、ECharts 5.3+,The project is composition API style,use remote API &amp; mock dual interface mode to load data.</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xPgx7n89--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txq74vuijxw7daqhe8jp.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xPgx7n89--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txq74vuijxw7daqhe8jp.gif" alt="todoadmin dashboard vue3 pinia element-plus mock echarts" width="640" height="360"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0tfFa5eM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9bqa3hgpo8j96pc2gfc.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0tfFa5eM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9bqa3hgpo8j96pc2gfc.gif" alt="todoadmin dashboard vue3 pinia element-plus mock echarts" width="640" height="360"></a></p> <h2> Demo </h2> <ul> <li><a href="https://pro.todoadmin.com">Todoadmin-pro Pro demo</a></li> <li><a href="https://base.todoadmin.com">Todoadmin-base Basic demo</a></li> </ul> <p><strong>Username：guest</strong><br> <strong>Password：123456</strong></p> <h2> <a href="https://github.com/todoadmin/vue-admin-chart">Clone Github repository</a> </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code><span class="c"># Clone</span> git clone <span class="nt">-b</span> https://github.com/todoadmin/vue-admin-chart.git <span class="c"># install</span> npm i <span class="c"># run project</span> npm run serve </code></pre> </div> <h2> <a href="https://gitee.com/todoadmin/vue-admin-chart">Clone Gitee repository</a> </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code><span class="c"># Clone</span> git clone <span class="nt">-b</span> https://gitee.com/todoadmin/vue-admin-chart.git <span class="c"># install</span> npm i <span class="c"># run project</span> npm run serve </code></pre> </div> <h2> Ecosystem </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Project</th> <th>Status</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="https://github.com/vuejs/vue">vue</a></td> <td><a href="https://github.com/vuejs/vue"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--THKbXZC8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Vue-v3.2.36-brightgreen" alt="vue-ico" width="84" height="20"></a></td> <td>Progressive JS Framework</td> </tr> <tr> <td><a href="https://github.com/vuejs/vue-router">vue-router</a></td> <td><a href="https://github.com/vuejs/vue-router"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--a6wBJvug--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Vue--router-v4.0.15-brightgreen" alt="vue-router-ico" width="122" height="20"></a></td> <td>Single-page application routing</td> </tr> <tr> <td><a href="https://github.com/vuejs/vue-cli">vue-cli</a></td> <td><a href="https://github.com/vuejs/vue-cli"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wcMZrFzT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Vue--cli-v5.0.1-brightgreen" alt="vue-cli-ico" width="92" height="20"></a></td> <td>Project scaffolding</td> </tr> <tr> <td><a href="https://github.com/axios/axios">axios</a></td> <td><a href="https://github.com/axios/axios"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--n_w4pLZS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/axios-v0.2.7-brightgreen" alt="axios-ico" width="84" height="20"></a></td> <td>Promise network request Library</td> </tr> <tr> <td><a href="https://github.com/element-plus/element-plus">element-plus</a></td> <td><a href="https://github.com/element-plus/element-plus"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ralYWqM8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/element--plus-v2.2.2-brightgreen" alt="element-plus-ico" width="128" height="20"></a></td> <td>Vue3 component library</td> </tr> <tr> <td><a href="https://github.com/element-plus/element-plus-icons">element-plus-icons</a></td> <td><a href="https://github.com/element-plus/element-plus-icons"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--71GZAq1u--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/element--plus--icons-2.x-brightgreen" alt="element-plus-icons-ico" width="142" height="20"></a></td> <td>Vue3 component Icon library</td> </tr> <tr> <td><a href="https://github.com/vueup/vue-quill">vue-quill</a></td> <td><a href="https://github.com/vueup/vue-quill"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rW3GbosY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Vue--quill-v1.0.0--beta.8-brightgreen" alt="vue-quill-ico" width="144" height="20"></a></td> <td>Visual online text editor</td> </tr> <tr> <td><a href="https://github.com/kensnyder/quill-image-resize-module">quill-image-resize</a></td> <td><a href="https://github.com/kensnyder/quill-image-resize-module"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TOp6Ex11--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Quill--image--resize-v3.0.0-brightgreen" alt="quill-image-resize-ico" width="156" height="20"></a></td> <td>online text resize image</td> </tr> <tr> <td><a href="https://github.com/xyxiao001/vue-cropper">vue-cropper</a></td> <td><a href="https://github.com/xyxiao001/vue-cropper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fbTUhd9u--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/vue--cropper-v1.0.3-brightgreen" alt="vue-cropper-ico" width="122" height="20"></a></td> <td>vue image cropper</td> </tr> <tr> <td><a href="https://github.com/vuejs/pinia">pinia</a></td> <td><a href="https://github.com/vuejs/pinia"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jyFFuEYC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Pinia-v2.0.14-brightgreen" alt="pinia-ico" width="90" height="20"></a></td> <td>state management</td> </tr> <tr> <td><a href="https://github.com/intlify/vue-i18n-next/tree/master/packages/vue-i18n">vue-i18n-next</a></td> <td><a href="https://github.com/intlify/vue-i18n-next/tree/master/packages/vue-i18n"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zfBiPGcQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/Vue--i18n-v9.1.10-brightgreen" alt="vue-i18n-next-ico" width="112" height="20"></a></td> <td>Multi language</td> </tr> <tr> <td><a href="https://github.com/emn178/js-md5">js-md5</a></td> <td><a href="https://github.com/emn178/js-md5"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--D1v9O9aQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/js--md5-v0.7.3-brightgreen" alt="js-md5-ico" width="94" height="20"></a></td> <td>MD5 encryption</td> </tr> <tr> <td><a href="https://github.com/rstacruz/nprogress">nprogress</a></td> <td><a href="https://github.com/rstacruz/nprogress"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RBIbSWCa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/nprogress-v0.2.0-brightgreen" alt="nprogress-ico" width="110" height="20"></a></td> <td>Progress bar loading</td> </tr> <tr> <td><a href="http://echarts.apache.org">echarts</a></td> <td><a href="http://echarts.apache.org"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sqE1SN53--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.shields.io/badge/echarts-v5.3.2-brightgreen" alt="echarts-ico" width="96" height="20"></a></td> <td>echarts</td> </tr> </tbody> </table></div> <h2> Install（dependencies） </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm install or yarn install </code></pre> </div> <h3> Run dev </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm run serve or yarn serve </code></pre> </div> <h3> Build production </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm run build or yarn build </code></pre> </div> <h3> ESLint </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm run lint </code></pre> </div> <h3> setting </h3> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>config.js </code></pre> </div> <h2> Rendering Preview </h2> <p>The following is the screenshot of the pro version：</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9LdcSy-1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q8qwcad4fy39f38ep4e.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9LdcSy-1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q8qwcad4fy39f38ep4e.png" alt="todoadmin dashboard admin management visual data screen " width="880" height="532"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--vsn1pUHH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boi3bba988dnzlqz76x5.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vsn1pUHH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boi3bba988dnzlqz76x5.png" alt="todoadmin banner list" width="880" height="532"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uVvkUpsG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hawxa2p5vbswmput1ld7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uVvkUpsG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hawxa2p5vbswmput1ld7.png" alt="todoadmin dashboard" width="880" height="532"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7noSBcZK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwu84ajqu8sbpj968qm3.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7noSBcZK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwu84ajqu8sbpj968qm3.png" alt="todoadmin visual data big screen" width="880" height="532"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IbpXAek4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9o02c67wdke1yf78zxbg.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IbpXAek4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9o02c67wdke1yf78zxbg.png" alt="todoadmin dashboard map json" width="880" height="532"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jJGCqVMl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyp0bnz9ivjparvrubu6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jJGCqVMl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyp0bnz9ivjparvrubu6.png" alt="todoadmin vue element pinia mock php springboot" width="880" height="550"></a></p> <h2> Introduction functions </h2> <p><strong>Web</strong></p> <ul> <li>CDN Distributed js/ css / image / map json data</li> <li>Adopted exclusively API remote real-time interface and mock data, and API or mock can be switched freely</li> <li>120+ high quality components page</li> <li>The management real-time interface data transmission</li> <li>Real time generation of large screen dynamic chart of visual data</li> <li>Real-time data websocket interaction</li> <li>Composition API models</li> <li>JWT authentication</li> <li>Real-time monitoring system &amp; server resource usage</li> <li>Commercially available free of charge</li> <li>PC, mobile, tablet and other multi terminal compatibility</li> <li>Dynamic routing menu authentication</li> <li>Support MarkDown(md) file to Vue Component page</li> <li>Support mock data and remote data</li> <li>Support button function permission control</li> <li>Support the assignment of roles and permissions of member and administrator</li> <li>Support multiple theme switching and adding custom theme styles</li> <li>Support multi language text switching</li> <li>Support Pinia state management</li> <li>Support for custom Vue directives</li> <li>Support docking with third-party logistics platforms</li> <li>Support binding third-party accounts</li> <li>Support log tracing (member and administrator operation)</li> </ul> <p><strong>Restful &amp; Websocket</strong></p> <ul> <li>Go apis ver（1.7+）</li> <li>PHP apis ver （8.0.2 +）/Swoole （4.8+）</li> <li>SpringBoot apis ver （2.2+）</li> <li>Support multiple open source relational database switching：MySQL、MariaDB、PostgreSQL、openGauss、TiDB</li> <li>Supports multiple memory database switching：Redis、Memcached</li> <li>Cluster supporting relational database</li> <li>Cluster supporting memory database</li> <li>Support cloud storage and CDN distribution of static files (images, videos, documents, ...) </li> </ul> vue vueadmin adminlte3 admintemplate