AG-Admin-v2-UI
准备工作
- node.js环境(npm包管理器)
- vue-cli 脚手架构建工具
- cnpm npm的淘宝镜像
开发运行
# 安装依赖 npm install //or # 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 本地开发 开启服务 npm run dev
浏览器访问 http://localhost:9527
发布
# 发布测试环境 带webpack ananalyzer npm run build:sit-preview # 构建生成环境 npm run build:prod
部署nginx配置参考
location / {
# 指向我们打包后上传的前端文件
root /opt/nginx/dist;
index index.html;
}
location /jwt/ {
# 转发请求到后端服务网关
proxy_pass http://127.0.0.1:8765/jwt/;
}
location /api/ {
proxy_pass http://127.0.0.1:8765/api/;
}
目录结构
├── build // 构建相关 ├── config // 配置相关├── src // 源代码│ ├── api // 所有请求│ ├── assets // 主题 字体等静态资源│ ├── components // 全局公用组件│ ├── directive // 全局指令│ ├── filtres // 全局filter│ ├── mock // mock数据│ ├── router // 路由│ ├── store // 全局store管理│ ├── styles // 全局样式│ ├── utils // 全局公用方法│ ├── view // view│ ├── App.vue // 入口页面│ └── main.js // 入口 加载组件 初始化等├── static // 第三方不打包资源│ ├── jquery│ └── Tinymce // 富文本├── .babelrc // babel-loader 配置├── eslintrc.js // eslint 配置项├── .gitignore // git 忽略项├── favicon.ico // favicon图标├── index.html // html模板└── package.json // package.json
状态管理
后台只有user和app配置相关状态使用vuex存在全局,其它数据都由每个业务页面自己管理。
感谢
感谢作者:PanJiaChen
License
Apache License Version 2.0