这是一个轻量级的操作平台前端解决方案，适用于多数开发场景。基于vue2x开发框架和热门的 element-ui组件库实现。

• 配置了Vue全家桶技术栈、全局监听摁钮防抖事件、打包Gzip技术
• 引入了bootstrap5样式库、bootstrap-icons、Font Awesome4图标库
• 内置了动态路由、权限验证、请求拦截、响应拦截
• 封装了复制文本、数字千位符、cdn方法等实用小功能
• 集成了一系列常用好用的小插件，免去技术选型和技术试错的困扰
• 预设了三种界面布局方式
• 引入了unocss量子化样式引擎，搭配iconify异步图标，性能提升不止一点点
• 运用了vue过滤器、vue指令、vue混入、vue组件，将vue的优势发挥的淋漓尽致

最大的优点就是足够轻量，易拓展、好上手、可塑性极强。

node环境

注意看 .nvmrc 文件

Project setup

npm install

Compiles and hot-reloads for development

npm run serve       // 用于启动测试环境
npm run serve:pro   // 用于启动正式环境

Compiles and minifies for production

npm run build       // 用于打包正式环境
npm run build:test  // 用于打包测试环境

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

运行环境

node 12+

技术栈

• "axios": "^1.3.2"

• "vuex": "^3.6.2"

• "vue-router": "^3.6.5"

• "element-ui": "^2.15.13"

• "xlsx": "^0.18.5"

• "xlsx-style": "^0.8.13"

• "less": "^4.1.3"

• bootstrap5

• bootstrap-icons@1.10.0

• animate.css@4.1.1

• font-awesome@4.7.0

• print-js@1.6.0

• compressorjs@1.2.1

• cropperjs@1.5.12

目录结构

├── public                     # 静态资源（打包不编译）
├  ├── service/demo/           # 接口演示数据
├  └── index.html              # 内容模板
├── src                        # 源码编辑区
├  ├── assets/                 # 静态资源（打包会编译）
├  ├── components/             # 封装好的常用组件
├  ├── config/                 # 业务配置目录
├  ├── directives/             # 指令
├  ├── filters/                # 过滤器
├  ├── mixins/                 # 混入
├  ├── pages/                  # 业务页面
├  ├── router/                 # 路由配置
├  ├── service/                # 服务请求
├  ├── store/                  # 本地存储
├  ├── utils/                  # 小工具
├  ├── App.vue                 # 页面入口
├  └── main.js                 # 全局入口
├── .env                       # 全局环境变量配置
├── .env.development           # 开发环境变量配置
├── .env.production            # 生产环境变量配置
├── .env.test                  # 测试环境变量配置
├── babel.config.js            # babel-loader 配置
├── jsconfig.json              # 
├── package-lock.json          # 锁定依赖包
├── package.json               # 依赖清单
├── vue.config.js              # vue脚手架配置

项目对比

示例目前市场长使用较多的项目对比：

项目	eida-peoject	vue-admin-template	jeecg
目录结构
语法	通俗易懂	简单	复杂
可塑性	极强	强	弱
体积	微小	大	超级臃肿
耦合度	纯前端	纯前端	前端+后端
上手程度	半年从业者即可	一年以上	四年以上
演示地址	https://init-project-vue2.inscode.cc	https://panjiachen.gitee.io/vue-admin-template	http://boot.jeecg.com

指令

入口文件 src/directives/index.js

过滤器

入口文件 src/filters/index.js

混入

入口文件 src/mixins/index.js

小工具

封装的

第三方的

• Pdf、word、excel、ppt文件在线预览

• 打印：printJs

• excel导入和导出：xlsx、xlsx-style

• 富文本编辑器：vue-quill-editor

• compressorjs图片压缩

• cropperjs图片裁剪

不用的插件可以卸载以减少项目体积

布局说明

预设了3种页面布局：

开始上手

1. 删除public/service/demo/ 接口演示数据

2. 将src/service/api/ 里面的接口路径换成你的业务路径

3. 集成的插件有不用的记得卸载删除

命名规则

项目

• 自定义html的标签名用 - 隔开，如：

• 文件和文件夹的命名用 - 隔开，如：device-detail.vue

• 变量及函数以小驼峰命名，如：let tableData = [] 、function restData(){ }

• 页面文件的name命名为文件地址，如平台客户管理：name: "management-operation-index",

  页面文件指的是src/pages/里的.vue文件，呈现在浏览器的文件

数据

• 配置页面地址访问路径用 - 隔开，如 localhost:8080/power-staion

开发规范

• 每个文件的代码量基本不得超过500行，禁止超过600行！内容过多请组件化、模块化，降低臃肿耦合程度

• 样式尽量使用bootstrap5的类名，减少自行编写css，降低项目体积

• 插件体积超过10k的使用cdn引入。是css的话地址放到config/cdn-css.json，是js的的话地址放到config/cdn-scripts.json

• 页面的操作摁扭、展示模块等资源需要增加v-permission指令以权限控制，权限的数据到平台【资源管理】增加

技术支持

QQ：771184240

在使用过程中有哪里不懂的可以随时发问