readme

已实现

1. 首页迁移

待完成

1. 导航动画
2. 下拉动画
3. 向下拉到指定位置动画出来
4. 登录注册修改密码功能迁移

---

茶楼补缺

1. 无法按需导入模块

错误代码:

// 导出
export default {
    useCheckUserName,
    useCheckPwd,
    useCheckConfirmPwd
}

// 导入
import { useCheckUserName ,useCheckPwd } from "../hooks/useCheck.js";

解决方案:

• 默认导出需要导入接收全部，使用分别导出即可

export function useCheckUserName(_username){
    return _username
}
export function useCheckPwd(_password){
  return  _password.length >= 6 && _password.length <= 20
}
export function useCheckConfirmPwd(_password,_confirmPwd){
    return _password == _confirmPwd
}

2. 首页刷新，会挤压一下盒子，并且滚动条下移了一点

3. 导航条设置选中效果后，宽度发生变化

错误代码：

.nav-item {
  display: block;
  padding: 0 12px;
  
}

.route-active {
  font-weight: 700;
  border-bottom: solid;
}

解决方案： 由于nav-item设置了padding，选中后设置的weight使文字变大 所以将weight去掉即可

.route-active {
  /* font-weight: 700; */
  border-bottom: solid;
}

input框自动聚焦会有边框颜色

解决方案： 是由css的outline属性形成的，用伪类聚焦是将outline设为none或其他颜色就行

input:focus {
    outline:none
}

为什么ref状态作为reactive状态的属性时，访问、修改可以不用加.value

解决方案： 是由vue添加的特性，当ref状态作为reactive状态的属性时，访问该属性会自动解包，就像在插值语法中一样

const count = ref(1)
const state = reactive({
  count
})
// 访问
state.count

tip： 在pinia中，定义了ref状态，在组件中使用时pinia时，返回的是组合式函数，使用时，返回的是一个封装后的reactive实例，定义的ref状态可以 实例.count 访问，而无需加value

es6和es5模块化区别理解

• 导入导出方式不同
• 静态和动态导入
  • es5：动态导入，运行时加载
  • es6：静态导入，编译时就会被加载
• 导入和导出的性能
  • es5，更耗性能
  • es6
• 模块化支持的环境
  • es5，nodejs后端
  • es6，前端后端都支持

为什么导出的响应式对象，可以共享数据

• 因为导出的是一个对象，变量存储的为实际数据的引用，也就是说不同组件导入的store对象，指向的是同一个堆中的数据