vue vant charger

Simplified Chinese

TodoAdmin|vue-vant-charger (charging station)

Electric vehicles are currently a popular energy-saving, environmentally friendly and green means of transportation. Charging stations, like gas stations, can be set up on streets, communities, garages, parking lots, etc. With the popularity of charging stations, you no longer have to worry about running out of power halfway, and you no longer have to travel far because of insufficient power.

vue-vant-charger version: It is an integrated management backend template and mobile phone solution. The project uses TS script language and is based on Vue 3.2+/Vue-cli 5.0+/Vue-router 4.0+, Axios0.2.7+, Vant 3.5+, Pinia 2.0+ combined with Mockjs, etc., the project is based on Composition It is written in API style and uses two modes: remote API interface and local Mock dual interface to freely choose to load data.

Experience Demo address

• Vue-vant-charger base basic version demo address (vue3.2+ supports tablets and mobile phones)

Tip: Use your mobile browser to open the experience

Clone the vue-vant-charger project and click to visit the Github repository

 # Clone the project git clone -b https://github.com/todoadmin/vue-vant-charger.git# Install dependencies yarn install# Local development Start the project npm run serve or yarn serve

Clone the vue-vant-charger project and click to visit the Gitee repository

 # Clone the project git clone -b https://gitee.com/todoadmin/vue-vant-charger.git# Install dependencies yarn install# Local development Start the project npm run serve or yarn serve

The following is an introduction to the vant-charger charging station version

Project ecological plug-in [dependency] list

title name	Version	describe
vue		A progressive framework for building user interfaces
vue-router		Single page application routing
vue-cli		Project scaffolding
axios		Promise-based network request library
vant		Component library based on Vant mobile terminal
pinia		Status management
js-md5		MD5 encryption

Project installation (depends on installation)

yarn install

Run development environment

yarn serve

Production environment packaging

yarn build

repair file

npm run lint

Configuration file

#config目录下
/src/config

#项目主体配置import模块
/src/config/index.ts

#项目启动环境配置引入模块
/src/config/config.ts

#项目启动环境（生产环境/Dev环境）基本配置引入模块
/src/config/module/base.ts

#项目启动环境（生产环境/Dev环境）CDN配置引入模块
/src/config/module/cdn.ts

#项目主体全局常量import模块
/src/config/module/global.ts

#项目主体HTTP/HTTPS Restful请求接口地址常量import模块
/src/config/module/HUrl.ts

---

Introduction to front-end and back-end functions

front end

• CDN distributed introduction of JS/styles/images

• Exclusively adopts API remote real-time data interface and Mock local data dual interface, and can freely switch API or Mock

• Multiple high-quality mobile component pages

• The management background uses real-time interface data transmission

• Real-time generation of large-screen dynamic charts for visual data

• Real-time data uses Websocket interaction

• Adopt Composition API pattern

• Use JWT authentication

• Real-time monitoring system & server resource usage

• The open source version of the mobile phone version of the charging station is free for commercial use

• Cross-platform compatible with mobile phones, tablets and other mobile terminals

• Dynamic routing menu authentication

• Support mock local simulation data and remote simulation data

• Support button function level permission control

• Supports retrieving the charging station list based on distance priority, good reviews priority, price, etc.

• Support VIP membership activation

• Support connection to discount mall

• Support vehicle certification

• Support scanning code for charging

• Support map distribution of charging stations and charging piles

• Support third-party payment recharge

• Support recharge record log tracing

• Support charging record log tracing

• Supports joint use of vouchers, discount packages, etc.

• Support points cashback function

• Can support the development of business models such as agents and distributors

rear end

• Interface language (framework) version: SpringBoot (2.7.1)

• Support SpringSecurity + JWT and other authentication

• Can support multiple open source relational database switching: MySQL, MariaDB, PostgreSQL

• Can support multiple memory database switching: Redis, Memcached

• Clusters that can support relational databases

• Clusters that can support in-memory databases

• Can support cloud storage and CDN distribution of static files (pictures, videos, documents, etc.)

Demo address & warehouse address

• Vue-vant-charger charging station basic version demo address (vue3.2+ supports tablets and mobile phones)

• Github address

• Gitee code cloud address

Tip: Please use your mobile browser to open

Advantages & Notes

Vue-vant-charger充电桩开源项目有如下优势:
1. 独家采用API远程实时数据接口和Mock本地数据双接口调试（可自由切换数据接口模式）
2. 支持前后端路由菜单权限和功能按钮权限控制
3. 采用实时接口传输数据，让你事半功倍
4. 偏好数据、主题切换、账号切换等配置
5. 支持原生css和less 自动排序，eslint 自动修复
6. axios 二次封装，支持多种模式和参数方式
7. websocket 封装，支持实时数据传输方式
8. 支持MD5/RSA加密登录
9. 支持https数据加密传输
10. 使用CDN分发项目样式css和js、图片，让速度飞起来
11. 支持手机端、平板等操作

使用注意事项:
1. 项目默认使用Chrome浏览器，Vue Devtools 插件调试
2. 项目默认使用VSCode + Eslint校验规范，需要配置vscode编辑器
3. 项目也可以使用IntelliJ IDEA + 相关插件开发
4. 项目使用MIT开源协议，请保留MIT开源协议即可免费商用

Ask a question

If you have any questions, you can ask them and the author will deal with them quickly

Issue submission

If there are any problems or bugs in the project, you can submit an Issue

Mobile browser

Mainstream mobile browsers

IE/Edge	Firefox	Chrome	Safari
IE10/IE11/Edge	last 2 versions	last 2 versions	last 2 versions