同步操作将从 ldy31325755/vue-admin-block 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于 Vue, iView, Axios, Mock 企业级后台管理系统最佳实践。
├── /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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。