介绍 ecp-vue基于vue、element-ui构建开发，ecp-fast后台管理前端功能，提供一套更优的前端解决方案。
功能
- 登录/退出 (接口数据交互)
- 管理员列表 (接口数据交互)
- 角色管理 (接口数据交互)
- 菜单管理 (接口数据交互)
- SQL监控 (接口数据交互)
- 定时任务 (接口数据交互)
- 参数管理 (接口数据交互)
- 文件上传 (接口数据交互)
- 系统日志 (接口数据交互)
- 前后端分离，通过token进行数据交互，可独立部署
- 主题定制，通过scss变量统一一站式定制
- 动态菜单，通过菜单管理统一管理访问路由
- 数据切换，通过mock配置对接口数据／mock模拟数据进行切换
- 发布时，可动态配置CDN静态资源／切换新旧版本
- 更多，持续迭代中... 技术栈 你需要在本地安装 nodejs，提前了解和学习这些知识会对使用本项目有很大的帮助。
nodejs ES6 vue-cli vue vue-router vuex axios vue-cookie element-ui iconfont 目录结构 本项目已经通过vue-cli脚手架为你生产完整的开发框架（有根据业务需求做调整修改），下面是整个项目的目录结构。
├── dist // 构建打包生成部署文件 │ ├── 1805021549 // 静态资源（18年05月03日15时49分） │ ├── config // 配置 │ ├── index.html // index.html入口 ├── build // 构建相关 ├── config // 构建配置相关 ├── src // 源代码 │ ├── assets // 静态资源 │ ├── components // 全局公用组件 │ ├── element-ui // element-ui组件配置 │ ├── element-ui-theme // element-ui组件主题配置 │ ├── icons // 所有 svg icons │ ├── mock // mock 模拟数据 │ ├── router // 路由 │ ├── store // 全局 store管理 │ ├── utils // 全局公用方法 │ ├── views // view │ ├── App.vue // 入口组件 │ ├── main.js // 入口 ├── static // 第三方不打包资源 │ ├── config // 全局变量配置 │ ├── plugins // 插件 ├── .babelrc // babel-loader 配置 ├── eslintrc.js // eslint 配置项 ├── .gitignore // git 忽略项 ├── favicon.ico // favicon图标 ├── index.html // html模板 └── package.json // package.json 安装 安装过程中，可能会出现安装过慢、报错等情况，请尝试以下2种方式：
安装依赖
1
npm install -g cnpm --registry=https://registry.npm.taobao.org
2
cnpm install
启动服务
npm run dev
安装依赖
npm install
启动服务
npm run dev 启动完成后会自动打开浏览器访问 http://localhost:8001，你看到下面的页面就代表成功了。
布局 & 主题 整体布局包括：
头部导航条 main-navbar 左侧边栏 main-sidebar 中间内容展示 main-content 对应代码在 src/views/main.vue
ecp-fast中除去404、login页面，其它页面都是基于这个布局的。这里我将
无需嵌套上左右整体布局的路由称为“全局路由”放在globalRoutes常量中，
需嵌套上左右整体布局的路由称为“主入口路由”放在mainRoutes常量的children属性中。
对应代码在 src/router/index.js
// 全局路由(无需嵌套上左右整体布局) const globalRoutes = [ { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } }, { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } } ]
// 主入口路由(需嵌套上左右整体布局) const mainRoutes = { path: '/', component: _import('main'), name: 'main', redirect: { name: 'home' }, meta: { title: '主入口整体布局' }, children: [ // 通过meta对象设置路由展示方式 // 1. isTab: 是否通过tab展示内容, true: 是, false: 否 // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否 { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } }, { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } }, { path: '/demo-01', component: null, // 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理! name: 'demo-01', meta: { title: '我是一个通过iframe嵌套展示内容, 并通过tab打开 demo', isTab: true, iframeUrl: 'http://fast.demo.ecp.io/' } } ], beforeEnter (to, from, next) { let token = Vue.cookie.get('token') if (!token || !/\S/.test(token)) { next({ name: 'login' }) } next() } }
const router = new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由 routes: globalRoutes.concat(mainRoutes) }) 同时，主入口路由提供meta对象2个属性设置路由展示方式。
isTab: 是否通过tab展示内容
iframeUrl: 是否通过iframe嵌套展示内容
如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
菜单路由 之前版本的菜单路由都需要手动在router/index.js文件中添加，这次新版本提供通过菜单管理统一管理访问路由，自动映射对应文件目录组件（配合代码生成器开发更愉快哦）。具体请点击移步动态菜单路由。
主题定制 提供12套颜色主题，进行element-ui和整站主题切换。具体切换方法如下：
修改/src/element-ui-theme/index.js文件中import './element-[#17b3a3]/index.css'[]中括号中的值，值可以在同文件中list属性中取即可。（注意：这里只是修改element-ui组件主题） 修改/src/assets/scss/_variables.scss文件中$--color-primary: [#17b3a3];[]中括号中的值，值与第一步值同步即可。（注意：这里只是修改站点主题，不包括element-ui组件主题） 主题定制具体实现方法是：
先通过element-ui官方提供的在线主题生成工具，进行切换主题色，再下载解压文件（保留fonts目录中文件和index.css即可）放置/src/element-ui-theme/目录中，使用同目录中的index.js进行统一配置管理。 再设置修改站点主题，使整站主题色统一一致。 之所以放弃之前直接在项目中通过scss一站式设置主题，是因为开发时编译太慢！同时按需求加载组件的css文件并没有比现在的index.css文件小多少kb（主要大小还是在js文件上）。考虑到大部分一个站配置一个主题色后，不会频繁修改！
网上查阅也有通过打包插件，对css添加父级id or class进行主题切换的，但是这样就相当于12套皮肤，需要将12个index.css进行合并打包发布，那文件岂不是太大了！这样的需求暂不考虑！