Vue 3 + Typescript + Vite

商城管理后台

• Admin - 在线预览
• H5 - 在线预览
• 产品原型
• vue3-store-admin - 任务看板
• React-store-admin
• API-store-server

技术栈

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

开发工具

Windows

Mac

文件结构

├─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')：

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 空路由的处理

export default [
 {
   path: '/404',
   component: () => import('@/views/other/404'),
   hidden: true
 },
 {
   path: '*',
   redirect: '/404',
   hidden: true
 }
]

• store 不建议把所有的数据都放到store中来管理，无跨组件单路由数据就在当前路由处理。
• styles 为了方便全局引入相关的scss变量，vuecli3也提供了相应的方法addStyleResource()，此项目中引入了：_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 登录

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

1.2 角色权限

• 角色管理
• 角色菜单管理
• 角色菜单显示控制

1.3 订单管理

• 订单列表
• 订单查询
• 发货管理
• 售后管理
• 评价管理
• 配送管理
• 订单设置

1.4 设置

• 个人信息管理
• 修改密码

1.5 商品管理

• 商品列表
• 商品分类

2. 二期

2.1 店铺管理

• 店铺概况
• 店铺装修
• 广告管理

2.2 会员管理

• 会员统计
• 会员列表
• 会员卡管理

2.3 系统设置

• 店铺信息管理
• 管理员信息管理
• 床铺、交易等信息设置

3. 三期

3.1 营销管理

• 秒杀管理
• 优惠券管理
• 拼图管理