# ts+vue3+blog

**Repository Path**: tanh-coding/ts-vue3-blog

## Basic Information

- **Project Name**: ts+vue3+blog
- **Description**: ts+vue3+blog学习
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-04-01
- **Last Updated**: 2021-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ts-vue3-blog

## 学习记录

### 13vue3-来吧 展示
* vue3的搭建和配置
* 在项目中如何使用ts开发的案例

### 14 tab切换 
* 单元测试的深入理解
* 单元测试  点击事件的编写以及处理 出发点击事件后  

### 15 模拟数据
* interface 接口的使用 
* mooc数据的使用 以及moment的更高级用法 moment @type/moment

### 18 vue3 异步加载，加载动画
* 了解vue3异步加载组件新特性
* 异步加载组件 Suspense  的使用 里面有两个插槽 一个是 #default  #fallback  default 会执行一个异步函数后，展示

### 19 模拟vuex状态
* 使用类的方式，模拟vuex的存储状态
* 了解 泛型record的使用 用于定义对象 Record<string,number>
* 实现逻辑
  * 构造好数据格式{1：{...}}
  * 使用构造方法初始化
  * 使用类方法获取

### 20 axios 请求模拟数据
* 逻辑 -使用axios模拟网络请求
* 在本地拦截请求的数据
* 并返回个相应的请求
* @ts-ignore的使用

### 24 调整单元格测试
* 里面涉及到解决异步加载
* 请求数据 等问题

### 27 vue3-div使用可编辑
* 直到div存在改属性 contenteditable
* 实现 一个变量由null 到页面展示完，变成一个div的标签

### 28 vue3-div数据双向绑定
* 需要用一个新的值来存 需要双向绑定的值
* div @input 事件来完成双向绑定的值

### 29 vue3-markdown转html
* 使用marked 对markdown进行转化

### 31 代码高亮 
* 使用两个包 highlight.js  lodash 的debounce
* 所谓的延时执行 

### 33 存储数据
* 实现逻辑：
  * 使用axios 配合 自定义的vuex进行数据存储
  * 使用uuid来生成需要的id 

### 34 单元测试（写博客）
* 实现逻辑
* 注意事项 -- wrapper.vm.$nextTick() 表示等待渲染完成才进行下一步操作
* 组件向外注册事件时，需要在emits:[''] 中去注册
* jest实现路由的模拟
* mock实现数据的获取
  
### 41 vue3-弹窗（teleport）
* 实现注册弹窗的逻辑
  * 利用VUE3 teleport 新特性 类似插槽
  * teleport to="#modal" 这里指向一个 id="modal"的容器
  * 通过控制teleport组件来控制 显示一否
* 实现变量状态全局使用
  * 使用ref动态变量属性
  * 在util下面 创建一个 变量
  * 并且拥有赋值对应的放啊
  * 返回一个函数

### 43 封装表单验证
* 实现逻辑
  * 使用接口的方式完成表单的验证
* 学习心得
  * 更加了解ts，看来还需要抽时间了解一个ts的interface 接口


### 47 动态组件的使用
* 逻辑
  * 通过component 组件的is属性，可以指定对应的组件
* 实现方式

```
const signUp=()=>{
  component.value=markRaw(Signup)
  modal.showModal();
}
```


### 48 权限控制和路由守卫
* 实现逻辑
* 给需要控制的路由设置meta{authRequest:true}
* 通过store判断用户是否登录来实现

```
router.beforeEach((to,from,next)=>{
  const store=useStore()
  if(to.meta.requiresAuth&&!store.getState().loginUser.currentUserId){
    return next({name:"Home"})
  }
  next()
})
```


### 48 markRow 解决调试栏报的警告


### 课程完结


## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your unit tests
```
npm run test:unit
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).