vite+pinia+typescript项目实战|首页

1.路由设计

一级路由分别是：
登录
布局容器layout

2.配置eslint规则

添加自定义规则，将组件必须用组合词关闭。

3.配置路由

createRouter是创建路由实例。
history：createWebHashHistory() //是设置哈希模式
相当于vue2 的mode:hash。

在main.ts导入

注意：vue3中index.vue后缀名需要补全。

4. layout布局-顶部通栏

看不到字体图标，在index.html导入字体图标文件。

封装一个组件，完成顶部通栏的效果。
在layout中导入组件。

注意：在vue3中的setup语法糖中，局部组件不需要注册，直接使用即可。

5.layout布局-头部导航

因为这里导航的前半部分需要制作头部吸顶效果需要复用，所以，把前面一部分封装成一个组件。
所以这里的组件分为
app-header
app-header-nav

6.layout布局-底部导航

书写样式，封装组件即可。

7.使用pinia管理数据

1.导入，注册

2.初始化仓库home

因为pinia是没有module的，所以这里设置一个index的出口，用于管理所有的仓库。

这里使用optionStore方式进行。
state使用函数式书写。防止仓库数据污染。
在actions中获取state直接使用this即可。

3. 使用index.ts统一暴露

4.使用仓库

获取数据

调用action

注意：setup语法糖相当于created钩子

8.ts生命类型文件规划

1.定义类型声明

暴露类型，需要使用type来进行声明。

2.类型导入

注意：导入时，要添加type

9.axios二次封装，改写axios值的返回值TS类型。

让ts和axios组合更加方便。