README
This is a generated README.md file. You can write your content here.
小于 1 分钟
README
This is a generated README.md file. You can write your content here.
小于 1 分钟
https://www.cnblogs.com/gamepen/p/17459917.html
prettier 配置
prettier 格式化工具，保证代码美观
1. 安装依赖包
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
小于 1 分钟
vue3 全局注册组件
vue3 全局注册组件
在 main.ts 里面直接引入并使用即可
// 全局注册组件
import SvgIcon from "@/components/SvgIcon/index.vue";
app.component("SvgIcon", SvgIcon);
大约 1 分钟
svg 组件封装
1. 定义子组件
<template>
<div>
<!-- 测试 SVG 图标使用 -->
<!-- svg:图标外层容器节点，内部需要与 use 标签结合使用 -->
<svg :style="{ width, height }">
<!-- xlink:href 执行用哪一个图标，属性值务必#icon-图标名称 -->
<!-- use 标签 fill 属性可以设置图标的颜色 -->
<use :xlink:href="prefix + name" :fill="color"></use>
</svg>
</div>
</template>
<script setup lang="ts">
//接收父组件传递过来的参数
defineProps({
//接收父组件传递的 xlink:href 属性值前缀
prefix: {
type: String,
default: "#icon-"
},
//接收父组件传递的名称
name: {
type: String,
default: "#vite"
},
//接收父组件传递的颜色
color: {
type: String,
default: "#black"
},
//接收父组件传递的宽度
width: {
type: String,
default: "16px"
},
//接收父组件传递的高度
height: {
type: String,
default: "16px"
}
})
</script>
<style scoped></style>
小于 1 分钟
svg 图标配置
使用 svg 之后，网页加载的不再为图片资源，页面性能得到提升
svg 文件比 img 小，在项目中几乎不占用资源
（vue3 + vite + ts）
1. 安装 SVG 依赖
pnpm install vite-plugin-svg-icons -D
大约 1 分钟
mock 数据
以下基于 mock 的 vite-plugin-mock 版本为 2.9.6 实现，其他版本有可能导致报错
大约 2 分钟
小于 1 分钟
axios 二次封装
目的：
1. 使用请求拦截器，可以在请求拦截器中处理一些业务（开始进度条、请求头携带公共参数）
2. 使用响应拦截器，可以在响应拦截器中处理一些业务（进度条结束、简化服务器返回的数据、处理 http 网络错误）
1.新建 utils 文件夹，新建 request.ts
大约 2 分钟
2024 年 04 月 26 日 日记
上午
第一件事
第二件事
中午
第一件事
第二件事
晚上
第一件事
第二件事
2024 年 04 月 26 日
小于 1 分钟
...