vue3.0 —— 项目知乎者也

1.首页
1.固定头部组件
1.Dropdown组件
2.DropdownItem组件
2.column列表组件

2.登录
1.登录账号
validate-input组件 单独输入框验证规则
validate-form组件 提交验证全部信息
2.注册账号

3.类目详情页
1.PostList组件

4.文章详情页
1.Author组件

5.发布文章页
1.upload组件

6.全局组件(teleport)
1.loader组件
2.Message组件
3.modal组件

7.登录页面的流程
islogin
true
true去往登录页 => 去首页
false => next()
false
有token
发送获取用户信息的请求
失败 => login
成功
true去往登录页 => 去首页
false => next()
没有token
是必须登录 => login
false => next()

8.页面需要的hooks (时间的处理方法)
1.beforeUploadCheck 上传组件上传之前的校验
2.Message 全局调用绑定DOM
3.helper arrToObj数组转对象，objToArr对象转数组
4.ImageOss 图像使用OSS处理大小
5.teleportDomCreate 全局组件自动化绑定DOM元素
6.useClickOutside 点击某个元素判断显示隐藏

9.需要下载的模块包
typescript，axios，bootstrap，mitt，vue，vue-router，vuex

10.vue3新增属性
ref
reactive
userStore
defineComponent
setup(props,context)
userRouter userRoute
teleport *定义在全局的组件
attr'在元素上添加
Array as PropType<RulesProp> *定义子组件中接收的props类型需要使用PropType<RulesProp> 定义琦类型，RulesProp需要export在父组件中使用

vue3+vite+typescript 创建项目的流程
1.npm install -g create-vite-app
2.create-vite-app vue3-vite(项目名称)
cd vue3-vite
npm install
npm run dev
3.npm install typescript -D
npx tsc --init(.js修改为.ts)

4.在项目根目录添加shim.d.ts文件
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
5.npm install vue-router@next -S
6.npm install vuex@next -S
7.npm install axios -S