优医问诊1. 图标组件-打包svg地图 https://github.com/vbenjs/vite-plugin-

组件数据懒加载

1. 借用vue/use 的 useIntersectionObserver函数, 观察目标容器是否在可视区,如果遇见一些常见的需求可以先看看 @vueuse/core 是否提供，这样可以提高开发效率。

使用：窗口尺寸，滚动距离，是否进入可视区，倒计时，...等等

1.1 图标组件-打包svg地图 github.com/vbenjs/vite…

实现：根据 icons 文件svg图片打包到项目中，通过组件使用图标

安装插件 yarn add vite-plugin-svg-icons -D
使用插件 vite.config.ts

+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' +import path from 'path'
- createSvgIconsPlugin({
- ```
 // 指定图标文件夹，绝对路径（NODE代码）
```
- ```
 iconDirs: [path.resolve(process.cwd(), 'src/icons')]
```
- })
导入到main

+import 'virtual:svg-icons-register'

使用svg精灵地图

<svg aria-hidden="true">
     <!-- #icon-文件夹名称-图片名称 -->
      <use href="#icon-login-eye-off" />
</svg>

icons文件打包的产物？
- 会生成一个 svg 结构（js创建的）包含所有图标，理解为 精灵图
怎么使用svg图标？
- 通过 svg 标签 #icon-文件夹名称-图片名称 指定图片，理解 精灵图定位坐标

1.2 图标组件-封装svg组件

实现：把 svg 标签使用图标封装起来

<script setup lang="ts">
// 提供name属性即可 defineProps<{
  name: string
}>()
</script>
<template>
  <svg aria-hidden="true" class="cp-icon">
    <use :href="`#icon-${name}`" />
  </svg>
</template>
<style lang="scss" scoped>
.cp-icon {
  // 和字体一样大
  width: 1em;
  height: 1em;
}
</style>

类型 types/components.d.ts

import CpNavBar from '@/components/CpNavBar.vue' import CpIcon from '@/components/CpIcon.vue' declare module 'vue' { interface GlobalComponents { CpNavBar: typeof CpNavBar CpIcon: typeof CpIcon } }

2 布局容器-加载进度

1. 安装插件

pnpm add nprogress
pnpm add @types/nprogress -D
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
1. 切换路由前开启
router.beforeEach((to) => {
+  NProgress.start()
2. 路由切换完毕后关闭
router.afterEach((to) => {
  // 修改标题
  document.title = `${to.meta.title || ''}`
  NProgress.done()
})
3. 颜色修改
NProgress.configure({ showSpinner: false })
main.scss
#nprogress .bar {
  background-color: var(--cp-primary) !important;
}

3. 数据持久化

使用 pinia-plugin-persistedstate 实现pinia仓库状态持久化，且完成测试

pinia-plugin-persistedstate - npm (npmjs.com)

yarn add pinia-plugin-persistedstate
2. 使用 main.ts
import persist from 'pinia-plugin-persistedstate'
app.use(createPinia().use(persist))
3. 配置 stores/user.ts
 {  persist: true }

4. VueUse工具大全

安装 npm i @vueuse/core 工具包

// 使用窗口大小

import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()

// 使用剪贴板 useClipboard 复制订单号

import { useClipboard } from '@vueuse/core'
const { copy, isSupported } = useClipboard()

5. 打包分析

npm i rollup-plugin-visualizer -D

修改vite.config.ts配置文件如下

 import { visualizer } from 'rollup-plugin-visualizer';
+ const lifecycle = process.env.npm_lifecycle_event;
+ export default defineConfig(({ mode }: UserConfig): UserConfig => {//如果原来是对象，要修改为方法增加return {进行包裹
 ......
 plugins: [
      // 只有在report命令下才配置打包分析插件
 +     lifecycle === 'report'? visualizer({ open: true, brotliSize: true, filename: 'report.html' }): null

修改package.json文件

scripts:{ 
+    "report": "rimraf dist && cross-env vite build",

如果打包文件不在dist，请修改dist为打包目录。如果没有cross-env请在开发环境先安装。

npm run report

优医问诊