# vue-admin-2102b

**Repository Path**: h5web/vue-admin-2102b

## Basic Information

- **Project Name**: vue-admin-2102b
- **Description**: 电商后台管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-21
- **Last Updated**: 2022-01-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 项目搭建

### element-ui 安装

```
npm i element-ui -S
```

引入：

```js
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);
```

### 配路由

router/index.js

```js
const routes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("views/Login.vue"),
  },
  {
    path: "/home",
    name: "Home",
    component: () => import("views/home/Home.vue"),
  },
];
```

### vue.config.js

跨域：当前项目不用配跨域，因为当前项目的接口是允许跨域请求的。

别名：，，，，

### axios

```JS
cnpm install axios -S

import axios from 'axios'

axios.defaults.baseURL='http://timemeetyou.com:8889/api/private/v1'
axios.defaults.timeout=5000;

Vue.prototype.$axios=axios;
```

### 引入初始化的全局样式 reset.css (global.css)

https://www.jq22.com/webqd6168

### 登陆页面

el-form

:rules='{username:[{required:true,message:'校验不通过的信息',trigger:'blur'},{min:4,max:8}]}'
:model='{username:xxx,password:123456}'

el-form-item
prop='username'

el-input

el-button

form 表单的校验

登陆成功

async login(){
let res= await=api.login({username:xxx,password:123456})
if(res.code!=200){
return this.$message.error(res.msg)
}
window.sessionStorage(token,res.token);
this.$router.push('/home')
}

### 主页

布局

el-container 外层容器。

el-header 头部组件
logo 图片
项目标题
el-button 退出

el-aside

el-menu 侧边栏导航
:collapse="isCollapse" 是否折叠
default-active='index="/users"' 指定活动的菜单
router

el-submenu 一级导航
el-submenu-grop 给二级导航分组
el-summenu-item 二级导航
:index='/user'

el-amin
<router-view>

el-footer

### router 扩充

```js
{
path:'/home',
name:'Home',
component: ()=>import('views/home/Home.vue'),
redirect:'/users',
children:[
{
path:'/users',
name: 'Users',
component: ()=>import('views/user/Users.vue')
},
{
path:'/roles',
name:'Roles',
component:()=>import('views/roles/Rules.vue')
}
]
}
```

<!-- 问题：跳转到相同路径的路由时会报错 -->

<!-- router进行了改造 -->

```js
// 重写 router push 方法，路由往同一地址跳转时会报错的情况
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalPush.call(this, location, onResolve, onReject);
  return originalPush.call(this, location).catch((err) => err);
};
```

### 用户列表

el-breadcrumb 面包屑

:to='{}'

el-card 卡片
搜索，
el-input+el-button
添加
el-button

表格展示
el-table height='250'
:data='[{usernmae:xxx},{}]'

el-table-column type='index' fixed='left'
el-table-column 列 prop='username' lable='列名' width='200'

el-table-column lable='列名' width='300'
<template slot-scope='scope'>
<el-swithch v-model='scope.row.mg_state' @change='fn(scope.row)'>

el-table-column fixed='right'
<template slot-scope='scope'>

<el-button @click='fn(scope.row.id)'>

el-dialog 弹出框 添加用户
el-form
:rules
:model

el-dialog 修改用户
el-dialog 给用户分配权限

### 分页器

   <el-pagination>
        @size-change="handleSizeChange"   //当用户修改每页显示几条时触发
        @current-change="handleCurrentChange" //用户修改当前页码
        :current-page="queryInfo.pagenum"  //设置当前页
        :page-sizes="[5, 10, 20, 30]"   // 页面显示条数的选择器
        :page-size="queryInfo.pagesize"  // 每页显示多少条
        layout="total,prev, pager, next,sizes,jumper"  //布局顺序
        :total="total"  //总条数
   ></el-pagination>

### 权限列表

el-table

el-table-column type='expand' slot-scope='scope'

权限分配 tree 树形控件 清晰的展示层级结构

### 角色列表

el-table

### 商品管理

#### 商品列表

##### 商品添加

步骤条 steps
el-steps
el-step
图片上传
el-upload
富文本-网上搜

### 分类参数

### 商品分类

### 订单管理

#### 订单列表

### 数据统计

#### echart

### 优化 keep-alive 路由懒加载，图片懒加载

### 打包上线