|-- server //后台代码
|-- data //nedb数据库
|-- app.js //本地服务器
|-- mysql.js //本地服务器+mysql数据库(已废弃)
|-- package.json
|-- template
|-- .gitignore
|-- babel.config.js
|-- package-lock.json
|-- package.json //依赖
|-- README.md //项目介绍
|-- vue.config.js //项目配置
|-- public
| |-- favicon.ico
| |-- index.html
|-- src
|-- App.vue //根组件
|-- main.js //入口js文件
|-- api //接口配置文件
| |-- auth.js
| |-- index.js //统一导出接口文件
| |-- login.js
| |-- table.js
| |-- test.js
|-- assets //资源目录,这里的资源会被wabpack构建
| |-- js
| | |-- menu.js //菜单
| | |-- tabsEventBus.js
| |-- style
| |-- app.scss //全局样式
|-- components //公用组件
| |-- CommDialog
| | |-- index.vue
| |-- CommForm
| | |-- index.vue
| |-- CommTable
| | |-- index.scss
| | |-- index.vue
| |-- ExportExcel
| | |-- index.vue
| |-- ExportPdf
| | |-- index.vue
| |-- Header
| | |-- index.scss
| | |-- index.vue
| |-- Sideber
| | |-- index.vue
| |-- ThemePicker
| |-- index.vue
|-- router //前端路由
| |-- index.js
|-- store
| |-- index.js
| |-- modules
| |-- loading.js //页面loading管理
| |-- pagesTab.js //tab栏管理
| |-- permission.js //权限管理
|-- utils
| |-- index.js //函数工具库
| |-- request.js //http请求
| |-- directive //全局指令
| |-- index.js
|-- views //页面目录
|-- index.vue
|-- Components
| |-- baseView.vue
| |-- Export
| | |-- index.vue
| |-- Form
| | |-- index.vue
| |-- Table
| | |-- index.scss
| | |-- index.vue
| |-- VerificationCode
| |-- Identify.vue
| |-- index.vue
|-- Echarts
| |-- index.vue
|-- EnterJump
| |-- index.vue
|-- Home
| |-- index.vue
|-- Login
| |-- index.vue
|-- Permission
| |-- index.vue
|-- simulationVuex
| |-- index.vue
|-- Websocket
|-- index.vue
已默认启用线上服务器,如需启动本地服务器,按如下步骤操作:
server文件夹:本地服务器。用于模拟接口。
在server文件夹下
使用:
npm install
启动本地服务器
node app
vue.config.js
//target: 'http://47.103.32.42:8081/', // 线上服务器端接口地址
target: 'http://localhost:3000/', // 本地服务器端接口地址
- components文件夹组件说明:
- CommDialog组件的目的。利用一个组件解决单页面多个弹窗的问题;
- CommForm表单组件。自带搜索和重置按钮,只需传入搜索函数即完成搜索和重置按钮的功能;
- CommTable附带上方添加从左右两边开始的按钮及下方添加分页组件的功能(可控制序号列,勾选列,合并行以及自定义操作列);
- ExportExcel可将json数据导出成excel并合并单元格;
- ExportPdf具有html转pdf并下载的功能。支持分页,标注页脚(少量pdf导出可由前端实现,如果量大不建议前端实现导出);
- Header公共头部;
- Sideber利用递归组件实现多级菜单.
- 封装axios并挂载到vue实例上全局使用,具有请求拦截,响应拦截和默认loading功能,如需要loading,可在api文件夹下对应的文件里的请求参数加入loading:true;
- 在vue.config.js文件配置了反向代理用于解决跨域问题;
- 简易的Websocket聊天窗功能
- 已有全局指令:
- v-enterJump: 用于回车跳转到下一个输入框 (不能跳转时间控件);
- v-focus: 用于进入页面聚焦到某一个输入框.
- 根据权限动态加载路由及菜单
- 引入嵌入式数据库nedb,table页可增删改查,Permission页可编辑权限(编辑admin权限后重新登录可看见第6条功能效果)
npm install
npm run serve
npm run build
npm run lint
菜单使用递归组件故无法使用$emit传值给父组件(本项目使用eventBus实现传值)



