vue-admin-template (后台管理系统模版)

基于 PanJiaChen/vue-admin-template 项目重新整理的精简模版，删减和整理了一些内容，通过学习使得对原项目有了更深刻的理解，便于以后自己开发使用。

在 PanJiaChen/vue-admin-template 的基础上使用了 d2-crud-plus 的 crud 处理框架，可以根据 crud 配置快速开发 crud 功能。

• github 仓库
• gitee 仓库
• github 在线预览
• gitee 在线预览

功能

- vue-admin 后台模版
- d2-crud-plus 快速 crud

安装

# 克隆项目
git clone https://github.com/fuyi501/vue-admin-template.git

# 进入项目目录
cd vue-admin-template

# 安装依赖
npm install

# 启动项目
npm run serve

# 编译项目
npm run build

效果展示

部署

GitHub Pages

GitHub Pages 部署请看：https://cli.vuejs.org/zh/guide/deployment.html#github-pages

运行 deploy.sh 脚本即可：

sh deploy.sh

Docker (Nginx)

1、安装 Docker

2、编译项目文件

npm run build

3、使用 nginx 镜像构建 vue 应用镜像

docker pull nginx

4、创建 nginx 配置文件

在项目根目录下创建 nginx 文件夹，该文件夹下新建文件 default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。

5、创建 Dockerfile 文件

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

6、基于该 Dockerfile 构建 vue 应用镜像

# 注意不要少了最后的 “.”
# -t 是给镜像命名 . 是基于当前目录的 Dockerfile 来构建镜像
docker build -t vue-project-name .

7、运行 vue 应用镜像

docker run -d -p 9528:80 --name=vue-project-name vue-project-name

8、访问 vue 应用

打开浏览器，访问项目地址就可以了

相关信息

本项目是基于 PanJiaChen/vue-admin-template 重新整理的，它是一个极简的 vue admin 管理后台。

vue-element-admin

vue-element-admin 是 PanJiaChen/vue-admin-template 的完整版项目，是一个后台前端解决方案，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，可以帮助你快速搭建企业级中后台产品原型。

• 帮助文档：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
• 仓库：https://github.com/PanJiaChen/vue-element-admin
• 预览：https://panjiachen.gitee.io/vue-element-admin/#/dashboard

原作者 花裤衩 配套了系列教程文章，如何从零构建后一个完整的后台项目，可以先看完这些文章再来实践本项目。

• 手摸手，带你用 vue 撸后台 系列一(基础篇)
• 手摸手，带你用 vue 撸后台 系列二(登录权限篇)
• 手摸手，带你用 vue 撸后台 系列三 (实战篇)
• 手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)
• 手摸手，带你用vue撸后台 系列五(v4.0新版本)
• 手摸手，带你封装一个 vue component
• 手摸手，带你优雅的使用 icon
• 手摸手，带你用合理的姿势使用 webpack4（上）
• 手摸手，带你用合理的姿势使用 webpack4（下）

d2-crud-plus

d2-crud-plus 是基于 d2-admin 的 d2-crud 的扩展,旨在简化 d2-crud 配置，快速开发crud功能。

• 帮助文档：http://d2-crud-plus.docmirror.cn/d2-crud-plus/guide/
• 仓库：https://gitee.com/greper/d2-crud-plus
• 预览：http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/index.html

浏览器支持

Modern browsers and Internet Explorer 10+.

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

License

MIT