Vue3+ElementPlus+TS

使用技术

Vue3.0全家桶(Vue-Cli、Vue-Router、Vuex、Axios、Webpack)
Element Plus
TypeScript
Echarts

代码规范

配置husky、commitizen、eslint、prettier，制定前端开发规范（组件命名、文件存放位置），便于后期维护

文件存放位置：
assets是资源文件img/css
views是属于页面的组件
common是多个项目公用的组件
components是业务相关的组件
router是路由
stroe是Vuex仓库
service是axios请求
utils是工具(保存localstrage数据)

项目搭建流程

1.0. axios拦截器封装

①只有对应的实例才有的拦截器；
②所有的实例都有的拦截器（全局的拦截器）；
③单独请求的拦截器；

1.2. loading组件封装

1.3. UI组件库按需引入

1.4. normalize.css样式初始化

（1）在assets中创建css文件夹，创建base.less和index.less，在base.less中写好初始化代码，在index.less中通过@inport导入base.less
（2）在main.ts中导入normalize.css和入口样式文件index.less

1.5. 搭建登录页面的结构

整个登录界面是login.vue，登录面板是个大的组件login-panel.vue，里面的大标题、Tabs标签切换、记住密码和登录按钮都是写在login-panel.vue组件中，Tabs切换里面的输入框分别封装账号登录组件login-account.vue和手机登录组件login-phone.vue，再各自单独封装输入框校验规则。

1.5.1. 拿到输入框中的内容

1. 从vue中导入reactive方法（实现响应式数据的方法），在setup函数中定义个acount属性等于reactive()里面传一个对象，定义username和password的初始化值，再去return中把acount返回出去
2. 在el-input标签中分别用v-model="acount.name"和v-model="acount.password"的方式实现双向绑定数据

1.5.2. 表单验证规则

对表单配置一些规则再把规则告诉表单，表单会自动验证规则，开发中常用的规则是写一个对象里面有各个属性的规则，再把整个规则传给el-from标签，让它自己去找每个item进行验证。

1. 在login文件夹下面创建config文件夹，再分别创建账号登录的规则和手机登录的规则，在里面定义rules规则并export导出，比如账号的输入框对应的是数组（因为有多个验证规则），数组里面的规则写成对象形式，规则1验证是否必填项，规则2验证通过正则表达式验证输入的内容和长度是否正确，如果输错了都会有红色文字提示，都会在输入框失去焦点的时候触发验证
2. 回到login-account.vue组件中import导入rules，并且在return中把rules返回出去，然后在el-from标签上用:rules="rules"绑定规则，因为里面的el-from-item无法匹配对应的规则，所以需要给el-from-item标签分别用prop="username"和prop="password"的方式绑定对应的规则
3. 因为el-from拿不到el-from-item最新的值，还需要在el-from标签上面通过:model="account"拿到最新的值

1.6. 勾选记住密码绑定输入框

从vue中导入ref方法，在setup函数中定义isKeepPassword属性，值为ref(true)，然后在el-checkbox标签上面通过v-model="isKeepPassword"绑定。

1.7. 登录功能

在大的login-panel.vue组件中，此时点击立即登录按钮拿不到账号和密码。
方法一：可以在login-panel.vue组件上面定义ref，再把ref绑定到里面的表单小组件上面，就可以通过ref拿到账号和密码了
方法二：账号的登录逻辑分别写在账号登录组件login-account.vue和手机登录组件login-phone.vue上面
做法：在大的login-panel.vue组件中点击立即登录拿到账号密码，通知内部组件去执行操作（验证密码是否正确和记住密码需要把账号密码保存起来放到localstroage里面），然后去向服务器发送请求验证密码是否正确，正确后返回对应的用户信息给我保存起来，这套逻辑会写到vuex里面，封装一个actions，actions再向服务器发送请求。大的login-panel.vue组件只负责页面东西的搭建，以及告诉login-account.vue我现在点击了立即登录，至于内部该做什么事情你自己去验证自己去做登录

1.7.1. 登录按钮绑定点击事件

在大的login-panel.vue组件中，在登录按钮上面绑定一个handleLoginClick点击事件，在setup函数中定义handleLoginClick箭头函数，并且在return中把handleLoginClick返回出去。

1.7.2. 登录验证

需要告诉login-account.vue组件我点击了立即登录，然后去login-account.vue组件中获取组件对象，在大的login-panel.vue组件中直接调用组件方法。

1. 在login-account.vue中定义一个loginAction方法并return返回出去
2. 怎么拿到组件对象