Vue4 manager system
介绍
基于 Vue4 + Element UI 的后台管理系统模版,参考了其他项目的特点,综合功能。
数据操作使用async await进行异步处理。
后面会慢慢完善框架,主要是页面UI布局和数据交互封装部分。
后端开发框架可以使用SpringMVC+Mybatis进行开发。
https://gitee.com/e4glet/icdMangerSystem
效果展示
框架版本
- nodejs v12.16.1
- vue/cli 4.4.6
- element-ui/2.13.2
框架结构
src -- 资源目录
api -- 请求接口
axios -- 封装axios
assets -- 静态资源文件
components -- 组件
router -- 路由,负责指定页面链接
service -- 服务层,数据联调,引入请求
store -- Vuex
views -- 视图页面
main.js -- 入口文件
项目安装
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
默认项目访问入口
http://localhost:8080/
修改vue默认端口方法
在“nodemodules文件夹”→“@vue”→“@cli-service”→“lib”→“commands”→“serve.js”中,修改默认端口
const defaults = {
host: '0.0.0.0',
port: 8089, -- 这里修改
https: false
}
参考项目
- https://github.com/lin-xin/vue-manage-system
- https://github.com/yqrong/vvproject
项目打包
npm run build
vue.config.js为打包配置文件。
打包生成的dist目录为最终生成的vue应用目录,将其放置服务器即可。
Docker部署
- 编写docker-compose.yaml
version: '2.1'
services:
nginx:
restart: always
image: nginx
volumes:
#~ /var/local/nginx/nginx.conf为本机目录, /etc/nginx为容器目录
- /var/local/nginx/nginx.conf:/etc/nginx/nginx.conf
#~ /var/local/app/dist 为本机 build 后的dist目录, /usr/src/app为容器目录,
- /var/local/app/dist:/usr/src/app
ports:
- 80:80
privileged: true
- 编写 nginx.conf 配置
#user nobody;
worker_processes 2;
#工作模式及连接数上线
events {
worker_connections 1024; #单个工作进程 处理进程的最大并发数
}
http {
include mime.types;
default_type application/octet-stream;
#sendfile 指令指定 nginx 是否调用 sendfile 函数(zero copy 方式)来输出文件,对于普通应用,
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
# 开启GZIP
gzip on;
# # 监听 80 端口,转发请求到 3000 端口
server {
#监听端口
listen 80;
#编码格式
charset utf-8;
# 前端静态文件资源
location / {
root /usr/src/app;
index index.html index.htm;
try_files $uri $uri/ @rewrites;
}
# 配置如果匹配不到资源,将url指向 index.html, 在 vue-router 的 history 模式下使用,就不会显示404
location @rewrites {
rewrite ^(.*)$ /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
- 执行 docker-compose
docker-compose -d up
更新日志
- 2020年7月25日
- 增加tags标签功能
- 增加全屏显示功能
- 2020年7月21日
- 扩展了后台管理模版
- 2020年7月13日
- 精简完善axios示例,与后端SpringMVC对接
- 增加Qs引入并配置全局方法
- 2020年7月12日
- 安装axios,并对axios模块进行封装
- 增加使用axios示例
- 2020年7月9日
- 上传vuecli4基础框架,包含router,vuex;
- 增加登录验证示例,使用localStorage存储本地用户信息