1 Star 0 Fork 76

那么时光 / vue-admin-block

forked from ldy31325755 / vue-admin-block 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

Vuejs Admin Block

特性

基于 Vue, iView, Axios, Mock 企业级后台管理系统最佳实践。

技术栈

  • Axios @0.x
  • iView @2.x
  • Mockjs @1.x
  • Vue @2.5.x
  • Vue-Router @3.x
  • Vuex @3.x
  • ES6
  • SCSS

开发构建

目录结构

├── /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 https://gitee.com/cssui/vue-admin-block.git

进入项目安装依赖:

# 安装依赖
yarn
# 或
npm i

开发:

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

构建:

# 构建最小测试
npm run test

# 构建最小生产
npm run build

空文件

简介

基于 Vue, iView, Axios, Mock 企业级后台管理系统最佳实践。 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/wangqq335/vue-admin-block.git
git@gitee.com:wangqq335/vue-admin-block.git
wangqq335
vue-admin-block
vue-admin-block
master

搜索帮助

14c37bed 8189591 565d56ea 8189591