首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  前端开发

vue2+element 管理后台 集成解决方案 没有没做的,只要想不到的!

  •  4
     
  •   PanJiaChen · 2017-04-25 16:48:40 +08:00 · 7041 次点击
    这是一个创建于 872 天前的主题,其中的信息可能已经有所发展或是发生改变。

    线上地址

    前言

    这半年来一直在用 vue 写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然很低,效率依然很高,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用 vue+element+axios.由于是个人项目,所以数据请求都是用了 mockjs 代替。

    后续会出一系列的教程配套文章,如如何从零构建后台项目框架,如何做完整的用户系统(如权限验证,二次登录等),如何二次开发组件(如富文本),如何整合七牛等等文章,各种后台开发经验等等。莫急~~

    功能

    • 登录 /注销
    • 权限验证
    • 侧边栏
    • 面包屑
    • 富文本编辑器
    • Markdown 编辑器
    • JSON 编辑器
    • 列表拖拽
    • plitPane
    • Dropzone
    • Sticky
    • CountTo
    • echarts 图表
    • 401 , 401 错误页面
    • 错误日志
    • 导出 excel
    • table example
    • form example
    • 多环境发布
    • dashboard
    • 二次登录
    • 动态侧边栏
    • mock 数据
    • svg iconfont

    开发

        # 克隆项目
        git clone https://github.com/PanJiaChen/vue-element-admin.git
    
        # 安装依赖
        npm install
    
        # 本地开发 开启服务
        npm run build
    

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

    发布

        # 发布测试环境 带 webpack ananalyzer
        npm run build:sit-preview
    
        # 构建生成环境
        npm run build:prod
    

    目录结构

    ├── 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 存在全局,其它数据都由每个业务页面自己管理。

    线上 demo

    占坑

    一系列的配套文章即将来袭~

    6 回复  |  直到 2017-04-26 09:45:17 +08:00
        1
    qihaibin   2017-04-25 16:55:53 +08:00
    关注, mark
        2
    RE   2017-04-25 18:35:20 +08:00 via iPhone
    这个就厉害了,打卡关注
        3
    young   2017-04-25 18:39:47 +08:00
    赞👍
        4
    HLT   2017-04-25 18:45:46 +08:00
        5
    kely   2017-04-25 18:53:43 +08:00
    能不能让我的膝盖歇一会儿,又要跪,哭。。。。。前排占位
        6
    Espira   2017-04-26 09:45:17 +08:00
    赞一个
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2003 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 23ms · UTC 07:46 · PVG 15:46 · LAX 00:46 · JFK 03:46
    ♥ Do have faith in what you're doing.