# vue3-store-admin

**Repository Path**: jsfront/vue3-store-admin

## Basic Information

- **Project Name**: vue3-store-admin
- **Description**: 一款商城管理系统
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 43
- **Forks**: 11
- **Created**: 2021-06-23
- **Last Updated**: 2024-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Typescript + Vite
商城管理后台

- [Admin - 在线预览](http://demo.vyan.top/vue3-store-admin/)
- [H5 - 在线预览](http://demo.vyan.top/vue3-store-h5/)
- [产品原型](https://www.xiaopiu.com/web/byId?type=project&id=5b08d8e6f57b373a03dd5d67)
- [vue3-store-admin - 任务看板](https://gitee.com/jsfront/vue3-store-admin/board)
- [React-store-admin](https://gitee.com/jsfront/react-store-admin)
- [API-store-server](https://gitee.com/jsfront/store-server)

## 技术栈

技术 | 说明 | 官网
----|----|----
Vite | 下一代前端开发与构建工具 | [https://cn.vitejs.dev/](https://cn.vitejs.dev/)
Vue3 | 渐进式JavaScript 框架 | [https://v3.cn.vuejs.org/](https://v3.cn.vuejs.org/guide/introduction.html)
Vue-router | 官方的路由管理器 | [https://next.router.vuejs.org/zh/index.html](https://next.router.vuejs.org/zh/index.html)
Vuex | 全局状态管理模式 | [https://next.vuex.vuejs.org/zh/index.html](https://next.vuex.vuejs.org/zh/index.html)
Axios | 基于promise 的HTTP 库 | [https://github.com/axios/axios](https://github.com/axios/axios)
Ant Design Vue | 前端UI组件库 | [https://2x.antdv.com/](https://2x.antdv.com/)
Mockjs | 生成数据 | [http://mockjs.com/](http://mockjs.com/)
SCSS | CSS预处理器 | [https://sass-lang.com/](https://sass-lang.com/)
Tinymce | 可视化HTML编辑器 | [https://www.tiny.cloud/](https://www.tiny.cloud/)
Dayjs | 代替Momentjs日期库 | [https://dayjs.gitee.io/zh-CN/](https://dayjs.gitee.io/zh-CN/)
@icon-park/vue-next | 字节图标库 *1 | [https://iconpark.oceanengine.com/](https://iconpark.oceanengine.com/)

*1. 使用方法 | [https://github.com/bytedance/IconPark/tree/master/packages/vue-next](https://github.com/bytedance/IconPark/tree/master/packages/vue-next)


### 开发工具

#### Windows

名称 | 工具 | 官网
----|----|----
VScode | 主开发工具 | [https://code.visualstudio.com/](https://code.visualstudio.com/)
Webstorm | 辅开发工具 | [https://www.jetbrains.com/webstorm/](https://www.jetbrains.com/webstorm/)
Atom | 源码阅读工具 | [https://atom.io/](https://atom.io/)
Cmder | Cmd替代工具[windows] | [https://cmder.net/](https://cmder.net/)
Notepad2 | 临时单文件编辑[windows] | [http://www.flos-freeware.ch/notepad2.html](http://www.flos-freeware.ch/notepad2.html)
Chrome | 调试工具 | [https://www.google.com/intl/zh-CN/chrome/](https://www.google.com/intl/zh-CN/chrome/)

#### Mac

名称 | 工具 | 官网
----|----|----
Iterm2 | Mac OS终端利器[Mac] | [https://iterm2.com/](https://iterm2.com/)


## 文件结构

```javascript
├─dist           // 上线发布目录
├─public         // 公共资源目录
└─/
   ├─api           // 所有请求方法
   ├─assets        // 资源目录
   ├─components    // 全局组件
   ├─config        // 全局配置
   ├─interface     // 全局Interface
   ├─layout        // 布局文件
   ├─router        // 路由
   ├─store         // Vuex
   ├─styles        // CSS
   ├─utils         // 公共方法目录
   └─views         // 页面
       ├─common       // 常用操作
       ├─dashboard    // 首页
       ├─login        // 登录
       ├─order        // 订单管理
       ├─error        // 404, 403
       ├─product      // 商品管理
       ├─system       // 系统设置
       └─user         // 用户设置
```

需要注意的点：

- `@/components`已做批量绑定全局组件处理
- `@/config/app.js`：所有后期不会变化的数据
- `@/layout` 登录之后整个页面的组件放置处，比如头部导航`@/layout/pages/Navbar.vue`，左侧菜单`@/layout/pages/Sidebar.vue`，中间主区域的
- `@/layout/pages/AppMain.vue` `router-view`占位，
- 右边滑出的设置面板`@/layout/pages/AppSettings.vue`等等。
`@/main.js 中 render`函数已经渲染一个视图提供给el挂载，对应的路由就是根级路由，对应的视图就是`@/App.vue` 当中`router-view`，而`AppMain.vue`中对应的路由应该是`children`，视图就是`component: () => import('@/views/dashboard/index')`：
```javascript

const pre = '/index/'
export default [
 {
   path: '/',
   component: Layout,
   redirect: { name: 'dashboard' },
   children: [
     {
       path: `/dashboard`,
       name: 'dashboard',
       title: '公告板',
       component: () => import('@/views/dashboard/index'),
       meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
     }
   ]
 }
]
```
- `router`
空路由的处理
```javascript
export default [
 {
   path: '/404',
   component: () => import('@/views/other/404'),
   hidden: true
 },
 {
   path: '*',
   redirect: '/404',
   hidden: true
 }
]
```

- `store` 不建议把所有的数据都放到store中来管理，无跨组件单路由数据就在当前路由处理。
- `styles` 为了方便全局引入相关的scss变量，vuecli3也提供了相应的方法[addStyleResource()](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)，此项目中引入了：`_variables.scss, mixins.scss`方便全局内直接引用文件中的变量。
- `utils` 是所有公共方法集合，基本为业务无关方法。
- `views` 所有routes对应页面集合

### 开发约定
除了eslint之外的约定(若第三方参数违反约定，可以单行关闭`/*eslint-disable */`)：

- 根据前面的阐述，全局组件的增加，只要`@/components`中按驼峰式命名填加，其它的文件不用修改。
- views中超过2个语义的文件夹用中划线连接，`components`文件中单词用驼峰式，且首字母大写，文件名小写字母为路由映射文件，大写字母为组件引用文件。
- 所有组件名、css相关属性起始字母app，比如`<app-view />`就单一组件名称，`<div class="app-login"/>`为login容器，备选名称为：`ui`。

### 待开发的

#### 1. 一期

##### 1.1 登录

- [x] 根据token登录
- [x] 获取登录图形验证码
- [x] 获取当前用户信息
- [x] 过期刷新token
- [x] Dashboard 信息展示（订单统计信息，模块新闻显示）

##### 1.2 角色权限

- [ ] 角色管理
- [ ] 角色菜单管理
- [ ] 角色菜单显示控制

##### 1.3 订单管理

- [x] 订单列表
- [x] 订单查询
- [ ] 发货管理
- [ ] 售后管理
- [ ] 评价管理
- [ ] 配送管理
- [ ] 订单设置

##### 1.4 设置

- [ ] 个人信息管理
- [ ] 修改密码

##### 1.5 商品管理

- [ ] 商品列表
- [ ] 商品分类

#### 2. 二期

##### 2.1 店铺管理

- [ ] 店铺概况
- [ ] 店铺装修
- [ ] 广告管理

##### 2.2 会员管理

- [ ] 会员统计
- [ ] 会员列表
- [ ] 会员卡管理

##### 2.3 系统设置

- [ ] 店铺信息管理
- [ ] 管理员信息管理
- [ ] 床铺、交易等信息设置

#### 3. 三期

##### 3.1 营销管理

- [ ] 秒杀管理
- [ ] 优惠券管理
- [ ] 拼图管理