使用技术
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. 拿到输入框中的内容
- 从vue中导入
reactive
方法(实现响应式数据的方法),在setup函数中定义个acount
属性等于reactive()
里面传一个对象,定义username
和password
的初始化值,再去return中把acount
返回出去 - 在
el-input
标签中分别用v-model="acount.name"
和v-model="acount.password"
的方式实现双向绑定数据
1.5.2. 表单验证规则
对表单配置一些规则再把规则告诉表单,表单会自动验证规则,开发中常用的规则是写一个对象里面有各个属性的规则,再把整个规则传给el-from
标签,让它自己去找每个item
进行验证。
- 在login文件夹下面创建config文件夹,再分别创建账号登录的规则和手机登录的规则,在里面定义
rules
规则并export导出,比如账号的输入框对应的是数组(因为有多个验证规则),数组里面的规则写成对象形式,规则1验证是否必填项,规则2验证通过正则表达式验证输入的内容和长度是否正确,如果输错了都会有红色文字提示,都会在输入框失去焦点的时候触发验证 - 回到
login-account.vue
组件中import导入rules
,并且在return中把rules
返回出去,然后在el-from
标签上用:rules="rules"
绑定规则,因为里面的el-from-item
无法匹配对应的规则,所以需要给el-from-item
标签分别用prop="username"
和prop="password"
的方式绑定对应的规则 - 因为
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
组件中直接调用组件方法。
- 在
login-account.vue
中定义一个loginAction
方法并return返回出去 - 怎么拿到组件对象