代码拉取完成,页面将自动刷新
商城管理后台
技术 | 说明 | 官网 |
---|---|---|
craco | 前端开发与构建工具 | https://github.com/gsoft-inc/craco |
React | 用于构建用户界面的JavaScript库 | https://react.docschina.org/ |
React router | 官方的路由管理器 | http://react-guide.github.io/react-router-cn/ |
React Hooks | React状态管理 | https://react.docschina.org/docs/hooks-intro.html |
ahooks | 一个React Hooks库 | https://ahooks.js.org/zh-CN/ |
Mobx | 简单、可扩展的React状态管理 | https://cn.mobx.js.org/ |
Axios | 基于promise 的HTTP 库 | https://github.com/axios/axios |
Ant Design | 前端UI组件库 | https://2x.antdv.com/ |
Mockjs | 生成数据 | http://mockjs.com/ |
SCSS | CSS预处理器 | https://sass-lang.com/ |
Dayjs | 代替Momentjs日期库 | https://dayjs.gitee.io/zh-CN/ |
@icon-park/react | 字节图标库 *1 | https://iconpark.oceanengine.com/ |
*1. icon-park/react
使用方法 | https://github.com/bytedance/IconPark/tree/master/packages/react
名称 | 工具 | 官网 |
---|---|---|
VScode | 主开发工具 | https://code.visualstudio.com/ |
Webstorm | 辅开发工具 | https://www.jetbrains.com/webstorm/ |
Atom | 源码阅读工具 | https://atom.io/ |
Cmder | Cmd替代工具[windows] | https://cmder.net/ |
Notepad2 | 临时单文件编辑[windows] | http://www.flos-freeware.ch/notepad2.html |
Chrome | 调试工具 | https://www.google.com/intl/zh-CN/chrome/ |
名称 | 工具 | 官网 |
---|---|---|
Iterm2 | Mac OS终端利器[Mac] | https://iterm2.com/ |
├─dist // 上线发布目录
├─public // 公共资源目录
└─/
├─api // 所有请求方法
├─assets // 资源目录
├─components // 全局组件
├─config // 全局配置
├─hooks //
├─interface // 全局Interface
├─layouts // 布局文件
├─model //
├─router // 路由
├─store // Mobx
├─styles // CSS
├─typings //
├─utils // 公共方法目录
└─views // 页面
├─common // 常用操作
├─dashboard // 首页
├─login // 登录
├─order // 订单管理
├─error // 404, 403
├─product // 商品管理
├─system // 系统设置
└─user // 用户设置
需要注意的点:
@/components
已做批量绑定全局组件处理@/config/app.js
:所有后期不会变化的数据@/layout
登录之后整个页面的组件放置处,比如头部导航@/layout/Header
,左侧菜单@/layout/Sider
,中间主区域的@/layout/Content
等,
const pre = '/index/'
export default [
{
path: '/',
component: Layout,
redirect: { name: 'dashboard' },
children: [
{
path: `/dashboard`,
name: 'dashboard',
title: '公告板',
component: () => import('@/views/dashboard/index'),
}
]
}
]
router
空路由的处理export default [
{
path: '/404',
component: () => import('@/views/other/404'),
hidden: true
},
{
path: '*',
redirect: '/404',
hidden: true
}
]
store
不建议把所有的数据都放到store中来管理,无跨组件单路由数据就在当前路由处理。styles
为了方便全局引入相关的scss变量,,此项目中引入了:_variables.scss, mixins.scss
方便全局内直接引用文件中的变量。utils
是所有公共方法集合,基本为业务无关方法。views
所有routes对应页面集合除了eslint之外的约定(若第三方参数违反约定,可以单行关闭/*eslint-disable */
):
@/components
中按驼峰式命名填加,其它的文件不用修改。components
文件中单词用驼峰式,且首字母大写,文件名小写字母为路由映射文件,大写字母为组件引用文件。<app-view />
就单一组件名称,<div class="app-login"/>
为login容器,备选名称为:ui
。此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。