7.21 杭州源创会火热报名中,一起来看看移动开发如何紧跟浪潮?
Watch Star Fork

撸码人 / vue-admin-blockJavaScriptMIT

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
基于 Vue, Vue Router, Vuex, Axios, iView, Mock.js 企业级中后台管理系统典型模板
Loading...
README.md 3.61 KB

logo

Demo: http://vab.cssue.com/

  • Username: admin
  • Password: wasd@007

特性

  1. 基于 Vue.js 的企业级中后台开源模板
  2. 基于 Vue 官方命令行工具 vue-cli 脚手架搭建
  3. 使用 Vue 官方核心插件 Vue Router, Vuex
  4. 使用 Vue 官方建议的 Axios 插件进行 HTTP 操作
  5. 采用时下热门的 UI 组件库 iView
  6. 通过 Mock.js 插件拦截 Ajax 请求并生成随机数据

技术栈

  • axios @0.x
  • iview @2.x
  • mockjs @1.x
  • vue @2.5.x
  • vue-router @3.x
  • vuex @3.x
  • ECMAScript 6
  • cssnext

开发构建

目录结构

├── /build/          # 项目构建(webpack)相关配置
├── /config/         # 项目开发环境配置
├── /src/            # 源码目录
│ ├── /assets/       # 组件静态资源(图片)
│ ├── /components/   # 公共组件
│ ├── /config/       # 基础配置
│ ├── /mock/         # 数据模拟
│ ├── /router/       # 路由配置
│ ├── /services/     # 数据接口
│ ├── /store/        # vuex状态管理
│ ├── /utils/        # 工具函数
│ ├── /views/        # 路由组件(页面维度)
│ ├── App.vue        # 组件入口
│ └── main.js        # 程序入口
├── /static/         # 非组件静态资源
├── .babelrc         # ES6语法编译配置
├── .editorconfig    # 定义代码格式
├── .eslintignore    # ES6规范忽略文件
├── .eslintrc.js     # ES6语法规范配置
├── .gitignore       # git忽略文件
├── index.html       # 页面入口
├── package.json     # 项目依赖
└── README.md        # 项目文档

开发主流程

1, 进入 router 目录, 打开 routes.js 文件, 添加路由组件, 如 Users

{
  path: '/manage/users',
  name: 'Users',
  component: resolve => {
    require(['@/views/manage/Users'], resolve)
  }
}

具体阅读 router/routes.js 源码

2, 进入 views 目录, 新建路由组件, 如 Users.vue

├── /src/
│ ├── /views/
│ │ ├── /manage/
│ │ │ ├── Users.vue

具体阅读 views/manage/Users.vue 源码

3, 进入 services 目录, 新建数据接口文件, 如 users.js

├── /src/
│ ├── /services/
│ │ ├── /manage/
│ │ │ ├── users.js

具体阅读 services/manage/users.js 源码

4, 进入 mock 目录, 打开 app.js 文件添加临时菜单, 如 Users

{
  name: 'Manage',
  path: '/manage',
  children: [{
    name: 'Users',
    path: '/manage/users'
  }]
}

具体阅读 mock/app.js 源码

5, 如需 mock 数据, 进入 mock 目录, 新建数据模拟文件, 如 users.js

├── /src/
│ ├── /mock/
│ │ ├── users.js

具体阅读 mock/users.js 源码

6, 进入 mock 目录, 打开 index.js 文件添加数据模拟文件, 如 users

import users from './users'

// 用户管理
users(Mock, qs)

具体阅读 mock/index.js 源码

7, 如需使用 vuex 存储状态请阅读 views/common/partials/Sidebar.vue 组件和 store 目录源码

快速开始

克隆项目文件:

git clone git@gitee.com:cssui/vue-admin-block.git

进入项目安装依赖:

# 安装依赖
yarn
# 或
npm install

开发:

# 启用热加载到 localhost:8090
npm start
# 或
npm run dev

构建:

# 构建最小测试
npm run test

# 构建最小预发布
npm run release

# 构建最小生产
npm run build

# 构建最小生产并查看包分析器报告
npm run build --report

项目点评 ( 16 )

你可以在登录后,发表评论