# mall-b-admin
**Repository Path**: jameswatt2008/mall-b-admin
## Basic Information
- **Project Name**: mall-b-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-08
- **Last Updated**: 2025-08-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 创建gitee远程空仓库
https://gitee.com/jameswatt2008/mall-b-admin.git
# 创建本地项目
# 集成elementPlus
https://element-plus.org/zh-CN/
https://element-plus.sxtxhy.com/zh-CN/guide/quickstart.html#%E5%AE%8C%E6%95%B4%E5%BC%95%E5%85%A5
安装组件库
npm install element-plus
组件库-按需引入
https://element-plus.sxtxhy.com/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5
按需导入
```
npm install -D unplugin-vue-components unplugin-auto-import
```
vite配置
## 样式重置
#### 依赖安装
```sh
npm install normalize.css
```
#### main.js
```js
// main.js 引入
import 'normalize.css'
```
样式重置以后，默认你pading margin 就取消了，其他每个浏览器有差异的样式都被重置了
安装使用sass
```
npm i sass
```
安装以后，项目用可以使用sass
### 给页面设置100%高度
main.css
```
html,body,#app{
height: 100%;
}
```
这里给 html，body ，#app ，设置100%高度，主要是防止页面整体滚动，一般管理系统里面都是某个组件内部滚动，页面整体不滚动
## 图标安装
```
npm install @element-plus/icons-vue
```
注册
```
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
const app = createApp(App)
// 全局注册图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
```
和使用
```
Upload
```
# 二级路由配置
# layout页面布局
https://element-plus.org/zh-CN/component/container.html
#### Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
``：外层容器。 当子元素中包含 `` 或 `` 时，全部子元素会垂直上下排列， 否则会水平左右排列。
``：顶栏容器。
``：侧边栏容器。
``：主要区域容器。
``：底栏容器
我们在常见布局中选择一个 符合我们结构的，复制代码到layout组件中
## layout组件，稍作修改
```
Aside
Header
Main
```
像是直接这样使用也行，但是后期，里面的代码会比较多，所以我们把 侧边栏，头部，内容区域，单独都再封装成三个组件
## menu组件
https://element-plus.org/zh-CN/component/menu.html#%E4%BE%A7%E6%A0%8F
## menu组件的路由模式
# 登录页面
表单组件-card组件
表单组件的使用-表单的校验
https://element-plus.org/zh-CN/component/form.html
提交方法
# 样式穿透
作用--修改组件库的组件内置的样式 （不会影响其他页面这个组件的样式）
# 组件封装-menu的折叠状态-状态提升
## 折叠转态持久化
# xxx.d.ts文件
ts配置文件
ts语法作用于哪些文件，ent.d.ts作用于哪些文件
引入图标文件，ts报错
# 集成axios
npm i axios
二次封装
## 第一次封装
utils/request.js
创建一个axios请求实例，配置基地址，超时时间，默认contenttype ，拦截器
```
import axios from 'axios'
//http://47.94.6.186:3001/admindoc
const request = axios.create({
baseURL: 'http://47.94.6.186:3001/',
timeout:60000,
headers:{
// 'Content-Type':'application/json'
}
})
// https://www.axios-http.cn/docs/instance
// 添加请求拦截器
request.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
request.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
export default request
```
## 第二次封装--登录请求-登录页面-ts-interface
某一个功能（页面）的请求，封装到一个api/js文件
登录页面使用请求函数
## 请求拦截器
# 通知公共-管理-分类管理
## 1-创建空页面
## 2-配置路由
## 3-添加menu菜单
## 4- 通知公共分类页面的业务逻辑
### 根据-原型图或者效果图--先写静态页面
https://element-plus.org/zh-CN/component/table.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%88%97%E6%A8%A1%E6%9D%BF
### 页面交互逻辑-
### 发布
基本页面交互逻辑
调用接口
### 列表
请求函数-interface定义
结构处理
删除
删除增加确认弹框
编辑
编写接口请求函数--调用接口
# token过期处理-axios响应拦截器
