Vue3+nodejs全栈项目(资金管理系统)——前端篇

创建项目

新建的项目 打开 template下面有蓝色波浪线
解决方法：参考博客—— template蓝色波浪线

项目初始化

删掉不必要的文件和路由。
初始化样式，在assets下新建文件夹less，该文件夹下新建 reset.less存放一些初始化样式，然后新建index.less在其中引入reset.less

@import "./reset.less";
1

在main.js中全局引入

import './assets/less/index.less'
1

init改动代码

使用element-plus

官网文档

yarn add element-plus --save

在将项目中所需要用到的图片 放入到assets/images目录下

设置Register和404组件

新建views/register/Register.vue

router.index.js 中配置路由

{
   
   path: '/register',
   name: 'register',
   component: () => import("../views/register/Register.vue")
 },
1
2
3
4
5
6

新建views/NotFound.vue

router/index.js中配置路由

{
   
  path: '/:pathMatch(.*)',
  name: 'notfound',
  component: () => import("../views/NotFound.vue")
}
1
2
3
4
5
6

404页面如下：

搭建element注册表单

自定义校验规则

验证表单和按钮

用到相关知识点：vue3 - vue3中使用ref来获取dom节点

用Element-plus组件 真的样式上有很多让人无奈的地方，感觉还不如自己写一个表单组件。。。

该part提交的代码——gitee[register&404]

加载动画和消息提醒

加载动画和消息提醒 都发生在点击注册按钮之后。

点击注册按钮，注册成功的话 我们注册的信息，就会被放入到用户的数据库表内。

element-plus——