cdw3: vue3+typescript后台管理系统实战

一、创建及基础配置项目

1. 创建基于vite的项目

npm init vue@latest

2. vue文件声明

引入vue文件会报错：找不到模块或其对应的类型声明(禁用Vue-Official这个插件的情况下才会报错)，此时可以在env.d.ts文件中加入下面这段文件声明代码

加入vue文件声明之后，鼠标放到引入的App会显示DefineComponent，启用上面的插件后不会显示了

3. 目录结构及CSS样式重置

npm i -S normalize.css
搞一份reset.css

main.ts中引入；
npm i less -D

4. 路由配置

npm i -S vue-router

main.ts中使用

5. pinia状态管理

使用示例
npm i -S pinia

main.ts中引入

定义一个store----->counter

使用counter

6. axios

7. vite区分开发环境和生产环境

两种方式
方式一

方式二

方式二示例
定义变量以VITE开头

应用：
获取变量也加VITE

插曲：vite，在本地执行npm run build 打包后，可以执行 npm run preview进下预览

8. 引入Element-Plus

插曲

npm i -S element-plus
①全局引入

全局引入后，类型声明

②按需引入
npm install -D unplugin-vue-components unplugin-auto-import


按需引入后可以看见根目录下多了两个文件"auto-imports.d.ts", “components.d.ts”(在template中使用到的组件会自动添加到components.d.ts中)

然后需要手动把这两个文件加入到tsconfig.app.json中，这样鼠标放到组件上才会展示类型

在js中这样引入的组件不会自动加入到components.d.ts中

9. app宽高铺满全屏

不用挨个html、body、.app设置宽高100%，只需要如下设置

覆盖element-plus的css变量

10. 修改ui样式

除了自定义类直接修改对应样式，还可以通过修改变量覆盖原来的变量

11. 全局引入注册图标组件

注意上边app的类型来源

先点入createApp进入下图，指向createApp的类型CreateAppFunction，可以看见CreateAppFunction返回的类型App，所以 从vue中引入type App，就是registerIcons函数参数的类型

12. 使用插槽

具名插槽

13. 父组件调用子组件的方式

子组件上加ref=“accountRef”，accountRef = ref<InstanceType>
ref<InstanceType> vue中获取组件类型，但是调用子组件方法时ts会报错

报错：

不传类型就不报错了，上述报错尚不知原因

子组件暴露loginAction
下面也是一样的定义formRef的类型 ref<InstanceType>
被注释的方式也可以

14. ElMessage不生效

其实生效了但是看不见效果是因为没有引入样式

template中使用的element组件会被自动引入，因此不需要手动引入样式，但是js中使用的组件不会被自动引入

解决办法：第一种方式单独引入（全局引入所有样式也行，但是直接忽略该方式）

第二种使用插件 vite-plugin-style-import
npm install vite-plugin-style-import -D

配置完报错如下，继续安装 npm i -D consola

15. node基础配置及登录接口

配置开发环境接口服务地址

16. 定义类型文件的位置选择

由于这三个地方都要用到登录信息的数据类型，所以我们选择在src/types/下定义文件类型，在index.d.ts中统一导出

定义接口的地方使用

store中使用

17. pinia状态数据持久化

封装localStorage和sessionStorage

store中使用

登录之后跳转

18. 退出登录及路由守卫

19. 记住密码

setCache方法先修改成如下

localStorage.setItem()返回的是promise

20. 左侧menu导航

动态菜单
storeToRefs

21. 父子组件通信实现菜单折叠

子组件自定义事件

父组件监听自定义事件，传递属性给另一个子组件

子组件定义props接受

22. 穿透样式修改

直接插入到body中的样式，用global来穿透

deep的使用场景
由于父组件App.vue加了scoped，子组件test的根元素.test和.app都有了data-v-7a7a37b1，但是在app.vue中不用deep就能控制.test的样式，因为.test是test组件的根元素，

但是test里面的子元素就无法控制了，此时可以加deep

23. 手动创建静态路由

children中的子路由路径如果不以/开头，则路由跳转的时候会自动拼上父路由的path

24. 动态路由

1. 动态路由

接口返回的菜单地址

import.meta.glob(路径，{ eager: true }) eater: true–>直接返回文件Module
读取改路径下所有的ts文件
coderwhy插件自动生成这些目录及文件

ts文件导出路由及组件

login.ts中登录之后匹配动态路由，然后调用router.addRoute，加入到main父组件中的子路由中

router.addRoute(‘main’, route) 加入到了这个位置

—> 解决刷新后动态路由就不存在的问题
store/login.ts改成如下

store/index.ts修改

main.ts

2. 登录之后默认进入第一个动态路由

router/index.ts

3. 刷新页面根据当前页面url高亮菜单

25. 动态面包屑

26. 用户列表

1.定义用户列表数据状态

2.时间格式化

3. data-picker英文转中文

用el-config-provider组件把router-view包起来

4. 兄弟组件通过父组件通信

自定义时间发送给父组件，父组件通过ref调用另一个子组件暴露的方法

另一个子组件的方法要暴露出去，父组件才能调用

5. 分页查询

6. 删除接口

接口是delete，调用的时候也是delete

27. 封装公共组件

1. 封装公共查询条件组件page-search

注意props的类型限制、给表单项赋初始值、自定义事件

department.vue中使用page-search，引入配置数据

department.vue中引入公共js逻辑hooks

2. 封装公共表格组件 page-content

v-bind=item，相当于把item对象里所有的属性都分开绑定了

3. 封装公共弹窗组件page-modal

角色列表页面，新增弹窗，自定义新增项

5. defineProps中使用泛型不支持导入

只能在当前文件定义

28. 监听pinia中action的触发

场景：对数据新增、修改、删除后都要刷新列表，要将pageNo置为1，此时就可以监听store中的这些操作
name表示触发的action名称，写在after的回调中，确保action触发成功(没有请求报错)

29. 数字递增动画 插件 countup.js

30. echarts使用示例 三层封装

dashboard.vue引用pie-echart，只传入处理后的接口数据，pie-echart中定义配置项并且只接收所需要的动态数据，


具体引用echarts的页面只需要传入所需要的数据

31. 代码规范

.editorconfig

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false