blank-example v1.0.1

简介

一个后台集成解决方案，它基于 vue 和 element。它使用了最新的前端技术栈，动态路由，权限验证，提供了丰富的功能组件。

前序准备

你需要在本地安装 node 和 git。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、axios 和 element-ui，提前了解和学习这些知识会对使用本项目有很大的帮助。

开发

# 克隆项目
git clone http://47.106.167.226:3000/blank/example-admin.git

# 安装依赖
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

浏览器访问 http://localhost:8090

发布

# 构建生产环境
npm run build

# 带分析的打包方式
npm run build --report

说明

• 后端请求接口统一在src/services里,可以参考原有接口格式开发
• 页面统一在src/views里
• 封装了ajax的前置和后置拦截器进行权限检查和返回提示消息,详细内容参考utils/request.js
• 开发期间使用了webpack的反向代理解决跨域,详细内容参考config/index.js
• 按钮权限使用了vue指令方式开发,详细内容参考main.js里has指令
• 可以使用scss或者css编写样式
• 页面权限使用了vue-router路由表meta参数里的roles

#####示例如下

{
      path: 'user',
      component: () => import('@/views/user/list'),
      name: '用户',
      meta: {
        title: '用户',
        icon: 'user',
        roles: ['user:list']
      }
    }

其它

以下内容为可选操作,更加方便开发

• IDEA 选择File->Settings->Webpack 选择webpack configuration file为项目下的build\webpack.base.conf.js
• IDEA 安装 Vue.js Plugin
• IDEA 选择File->Settings->EsLint 将enable 去掉

将来实现

• 从后端直接加载动态路由
• 自动生成VUE代码拆分模块
• cdn 和import引入并存配置
• 补上前端校验逻辑
• 跳转回登陆前页面
• 自动生成代码加入导出Excel

Browsers support

Modern browsers and Internet Explorer 10+.