从零搭建内部管理系统Vue（一）

从零学习一个vue3模板管理系统（一）

使用网上模板，搭建vue3+vite+pinia+elementplus工程

登录页面

页面布局 新建页面 views--> login文件夹 -->index.vue

①容器定位：设置总体div 宽度100%，高度等于视口 图片不重复 按比例缩放

②使用element提供的el-row 和 el-col span为24分栏 col对其进行等分 xs<768px布局

③表单容器 el-form 宽度父容器80% 相对定位向下偏离30视口 内边距40px

④填写表单 el-form

1. ref :获取form表单元素
2. :model :定义表单对象
3. :rules :表单校验规则
4. 每一项使用el-form-item包裹
5. el-input 中 使用prefix-icon添加前置图标
6. el-input密码框使用show-password展示显示密码
7. 按钮展示加载状态 isloading

⑤定义user hooks

定义变量 loginForm以及校验变量rules

• 表单验证不通过,return。控制台打印不满足要求的 fields
• 表单验证通过,点击按钮向登录接口发送请求。解构响应，请求成功将得到的token存入pinia并添加至localstorage
• 请求失败 ElMessage或者ElNotification展示message
• 请求成功,跳转至主页

⑥引入pinia存储token

1. 创建仓库

2. 创建user仓库 （getToken 和 setToken都是从localstorage中取数据的方法）

3. app绑定pinia （部分代码）

4. 引入useUserStore进行存储 （部分代码）

let userStore=useUserStore();
/* 操作userStore */
 userStore.setToken(xxxxx)

⑦静态路由 测试登录

新建router-->index.ts 创建路由器并绑定至app上 （部分代码）

路由设置为:

其中 meta为路由附加信息 用以展示标题和是否显示 以及icon等信息。