Vue>> vue2admin>> 返回
项目作者： rootsli

项目描述 ：
基于vue2 + vue-router + vuex + fetch + PostCSS + element-ui +webpack2 实现的一个后台管理系统基础框架。
高级语言： JavaScript
项目地址: git://github.com/rootsli/vue2admin.git


vue2-admin - A scaffolding base Vue2.js

Vuejs Build Status MIT Licence stable

基于vue2 + vue-router + vuex + fetch + PostCSS + element-ui（也可以使用其他UI，例如iView） + webpack2 实现的一个后台管理系统基础框架。

框架能力：

  • 完全的基于组件化的架构
  • 基于组件的CSS命名空间独立，不相互污染
  • 登录功能（利用vuex与cookie的持久化方案进行登录认证缓存）
  • 多级路由支持
  • 基于vuex2的状态管理（开发时建议安装chrome插件vue.js devtools跟踪状态）
  • vuex2与cookie的持久化支持（支持对指定vuex状态进行持久化，并能指定cookie的过期时间）。具体示例请见项目源码：src\store\index.js
  • PostCSS支持：支持自动拼装前缀（autoprefixer插件），支持最新css语法（postcss-cssnext插件），支持@import方式引入css。具体示例请见项目源码：src\modules\page1\index.vue
  • 基于fetch的网络服务（源码路径：src\utils\request.js）
  • 支持mock数据服务（mock示例路径：src\apis\mock）
  • 基于webpack2的开发构建编译：支持开发阶段的HRM，支持模块依赖，静态资源优化，模块打包和Hash指纹等编译功能，一个命令，即可完成整个项目的构建编译
  • 提供了一个webpack大项目打包方案(On demand code-splitting)的示例，请见目录：src\modules\code-splitting-demo

点此查看运行效果（用户名密码不限）

  1. 说明：项目框架已经集成了大部分前端项目必须的插件服务和项目逻辑架构，可以拿来即用。让框架尽量简单，逻辑尽量清晰，编译构建过程完全可定制，也是本框架追求的目标之一。

Build Setup

  1. 依赖环境：运行项目前请确认本地已安装nodejs和npm。依赖的版本如下：
  2. - "node": ">= 4.0.0"
  3. - "npm": ">= 3.0.0"
  5. ※ 开发和运行时阶段依赖的其他包请到package.json中查看
  1. # 安装依赖-国内用户推荐使用npm淘宝镜像，设置方法：
  2. # step1.npm config set registry https://registry.npm.taobao.org 
  3. # step2.npm info underscore 
  4. npm install
  6. # serve with hot reload at localhost:8080
  7. npm run dev
  9. # build for production with minification
  10. npm run build
  12. # build for production and view the bundle analyzer report
  13. npm run build --report
  15. # run unit tests
  16. npm run unit
  18. # run e2e tests
  19. npm run e2e
  21. # run all tests
  22. npm test

工程目录结构

  1. src：项目源码。开发的时候代码写在这里。
  2.  |--assets # 项目静态资源，编译时不进行处理的资源都放这里
  3.  |--components # 项目公共组件库
  4.  |--config # 公共配置文件，例如路由配置等
  5.  |--css # 项目公共样式库
  6.  |--modules # 项目应用模块，根据应用需要，还可以有子模块，各子模块目录结构和顶级子模块类似
  7.  |    |--components # 模块级公共组件
  8.  |    |--views # 模块视图
  9.  |    |--css # 模块样式
  10.  |    |--js # 模块脚本
  11.  |--App.vue # 项目根视图
  12.  |--main.js # 项目入口文件
  13.  |--store # 基于vuex的状态管理模块
  14.  |    |--index.js # 入口及store初始化
  15.  |    |--mutation-types.js # mutation名称定义
  16.  |    |--state.js # 根state
  17.  |    |--mutations.js # 根mutation
  18.  |    |--getters.js # 根getter
  19.  |    |--actions.js # 根action
  20.  |    |--modules # 子模块的store对象
  21.  |    |    |--menu.js # menu模块
  22.  |--apis # 服务层ajax请求服务
  23.  |    |--mock # api数据mock服务
  24.  |--utils # 公共库函数
  25.  |    |--request.js # 网络请求服务，实现了对fetch的二次封装（目前只封装了get,post；实际项目中可按着示例封装其他请求）

页面结构

页面结构

todo

  • fetch与Service Workers的本地缓存方案
  • 国际化
  • 图表插件