vue-admin-template(项目模板)

配合使用的服务器端spring boot项目，请移步spring-boot-template

项目演示：地址 账号密码默认填充（admin，a123456）

简介

多个vue管理系统开发经验总结而成，集成element ui、axios等，封装了网络请求、dialog数据重置、 登录、正则、权限验证等工具类和全局方法

完整的、生产环境可直接使用的项目示例，而不是各种组件示例（组件示例可参考vue-element-admin）

特别适合中小型项目和个人开发者参考及使用，一天开发一个项目不是梦。

开发环境

• NPM 6.9.0 +(更低版本请自行尝试)
• IntelliJ IDEA ULTIMATE 、 WebStorm、VSCode、记事本 均可

技术选型

名称	介绍
element ui	UI组件
axios	网络请求
vue cli 4	使用vue cli4生成的项目

工程结构

template-front
├── public
│   ├── img -- 放置项目中的图片
│   ├── config.js -- 项目环境配置（服务器base url等），未使用vue cli的多环境配置文件(.env.development等)因为这种方式修改baseUrl必须重新打包
│   └── 其他文件夹 -- 为vue自带文件不做介绍
├── src
│   ├── components -- 放置项目公用组件
│   │   ├── VmSearch.vue -- 搜索框组件
│   │   └── VmTable.vue -- 表格封装，包含分页、搜索、搜索条件重置、网络请求等
│   ├── plugins -- 放置插件
│   │   ├── el-dialog-drag.js -- 此指令加在el-dialog上可实现dialog拖曳
│   │   ├── axios.js -- axios配置文件，token、全局网络请求错误提示、401跳转到登录页 均在此配置
│   │   ├── element.js -- 引入element ui
│   │   ├── http.js -- 在axios基础上增加的一层封装，简写网络请求，适合restfull风格的接口，挂在到全局
│   │   └── myPlugin.js -- 全局指令、方法挂载、全局异常处理
│   ├── router -- 路由
│   │   ├── router.js -- 路由配置文件
│   │   └── routerBuilder.js -- 路由生成工具类，也可不适用此工具类按照原有语法书写路由
│   ├── store -- vue状态管理
│   ├── style -- 全局css配置
│   │   ├── element.scss -- 覆写element ui的样式，例如圆角、主题色、表格边框等
│   │   ├── main.scss -- 项目全局css，放置公用css
│   │   ├── transition.scss -- 项目全局css动画
│   │   └── variables.scss -- css变量
│   ├── util -- 工具
│   │   ├── constant.js -- 放置静态变量、文本对照。可直接转化为el-select使用的数据格式.使用方式参照DeviceList.vue和DeviceEdit.vue
│   │   ├── loginUtil.js -- 登录返回数据保存和获取，token、用户名、权限等
│   │   └── regular.js -- 常用的正则表达式，校验用户名、密码等
│   └── 其他文件夹 -- 为vue自带文件不做介绍
│   ├── views -- 页面
│   │   ├── main -- 放置登录、主页、侧边栏等等
│   │   └── 其他文件夹  -- 放置自己的项目模块
│   └── 其他文件夹 -- 为vue自带文件不做介绍
├── .gitignore -- git忽略dist、node_modules、ide配置文件等
├── .npmrc -- 此文件npm会自动读取，无需改动。更改npm源，防止node-sass等安装失败
├── alias.config.js -- 编辑器无法识别vue的@符号路径，无法跳转。Intellij idea或者WebStorm中搜索webpack选中此文件，可使编辑器识别到@路径。如果无需跳转，可删除
├── Dockerfile -- 用docker的人懂得，不用的可删除此文件。
├── nginx.conf -- Dockerfile中使用此文件作为nginx配置文件(原版配置文件，只改动启用了gzip)。不使用docker和nginx部署的请忽略
└── 其他文件 -- 为vue cli自带文件不做介绍

运行项目

# clone或者下载项目

# 修改服务器地址`public/config.js`,可直接连接"http://118.25.44.86:8010/"进行测试
# 进入项目目录
cd template-front

# 安装依赖
npm install

# 启动项目
npm run serve

部署项目

docker部署

#进入项目根目录
cd template-front

#打包项目
npm run build

#docker打包镜像
docker build -t template-front:latest .

#启动docker容器,可使用-e SPRING_PROFILES_ACTIVE=${env}指定环境，不指定则默认为dev
docker run -itd --name template-front -e env=dev template-front:latest

使用Intellij idea docker插件部署

docker+jenkins部署

参考我的文章 最优雅的Docker+Jenkins pipeline部署vue项目，前端项目都可参考

直接部署

#进入项目根目录
cd template-front

#打包项目
npm run build

#将dist目录拷贝至任意web容器即可，tomcat、jetty、nginx、IIS均可

权限实现

RBAC基于角色的权限访问控制(Role-Based Access Control)

取消了用户和权限的直接关联，改为通过用户关联角色、角色关联权限的方法来间接地赋予用户权限。 当新增用户时只需分配已有的角色，大大减少运营人员工作量和出错率。

• 三张表分别为多对多关系

• 生成关联网之后的结构如下

• 代码实现,具体参考代码

建议

• 服务器地址配置在public/config.js

• 图标采用在线iconfont，请在index.html替换成自己的图标库

• 强烈建议启用eslint，可自动修复代码，既能避免很多错误也能统一团队的开发规范，用好的话大大提高效率

  Jetbrains系列（Intellij idea、WebStorm等）启用方式如下

• vue cli项目中，@默认表示src路径，但是编译器无法识别路径，导致无法ctrl+鼠标左键跳转， 在Jetbrains系列（Intellij idea、WebStorm等）setting中配置webpack别名路径即可。其他编辑器自行百度。

界面截图