介绍

vue-blog 是基于 vue.js，配合使用 element-ui 组件库的一个前端管理后台集成解决方案。它使用了目前主流的技术栈，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

建议

本项目的定位是后台集成方案，不适合当基础模板来进行二次开发。你可以把它当做工具集，在基础模板上进行开发时，想要什么功能或者组件就去复制过来。

集成方案：vue-blog
基础模板：vue-blog-template

功能

功能持续迭代中，欢迎 pr 和 issue

* 核心功能
    - 登录/注销
    - 权限验证
        - 页面级权限
        - 按钮级权限
    - 多环境
        - dev
        - prod
        - stage
    - 动态侧边栏
    - 动态面包屑
    - 错误处理
        - 401
        - 404
        - 错误日志
    - 其他处理
        - axios封装
        - cache封装
        - 页面平滑过渡
        - css预处理器全局变量
        - 包体积优化
    - svg icon / iconfont

* 其他扩展
    - mock
    - 引导页
    - 图钉
    - 返回顶部
    - 动态数值
    - 进度条
    - 剪切板
    - 富文本编辑器
    - Markdown编辑器
    - 动态换肤
    - 全屏化
    - 国际化多语言
    - 文件处理
        - 导入Excel
        - 导出Excel
        - 导出Zip
    - 拖拽功能
        - 拖拽弹框
        - 拖拽表格
        - 拖拽列表

前序准备

你的本地环境需要安装 Node 和 Git，本项目技术栈基于 ES2015+、vue、vue-router、vuex、axios 和 element-ui，所有的请求数据都使用 mock.js 模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。

版本要求

Node推荐 8.11.0+或稳定版，你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

如果你是Vue初学者，这里有一些资源可以帮助到你

安装

# 克隆项目
git clone https://github.com/uncleLian/vue-blog.git

# 安装依赖
npm install

# 本地开发、启动服务
npm run dev

启动完成后会自动打开浏览器访问 http://localhost:8002，看到登录页面或主页面就代表操作成功了。

目录结构

本项目已搭建了一个完整的开发目录结构，提供各类功能，可自行调整。

├── public                     
│   ├── static                 // 不打包资源
│   ├── index.html             // html模板
├── src                        
│   ├── api                    // 所有请求api
│   ├── assets                 // 样式、图标、图片等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filters                // 全局filter
│   ├── language               // 多语言
│   ├── layout                 // 页面结构
│   ├── mock                   // 模拟数据
│   ├── pages                  // 所有页面
│   ├── router                 // 路由
│   ├── store                  // store管理
│   ├── utils                  // 全局公用方法(请求、缓存、权限、错误处理等)
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口文件、初始化资源、组件等
├── .env.development           // 开发环境配置
├── .env.production            // 生成环境配置
├── .env.stage                   // 测试环境配置
├── .gitignore                 // git 忽略项
├── babel.config.js            // babel-loader 配置(vue-jsx)
├── package.json               // 依赖、eslint等
└── vue.config.js              // vue-cli 配置