如何自己制作小程序铜川网站seo

功能14：使用本地SVG图标库

功能13：侧边栏加入Logo
功能12：折叠/展开侧边栏
功能11：实现面包屑功能
功能10：添加首页菜单项
功能9：退出登录功能
功能8：页面权限控制
功能7：路由全局前置守卫
功能6：动态添加路由记录
功能5：侧边栏菜单动态显示
功能4：首页使用Layout布局
功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目

前言

在 Vite + Vue3 项目中实现：

1. 自动将 SVG 文件转换为可复用的 <symbol> 图标
2. 运行时动态加载 SVG 图标
3. 通过 <use> 标签高效复用图标

一.操作步骤

1.安装依赖

pnpm add -D vite-plugin-svg-icons

2.Vite 配置（vite.config.js）

import { fileURLToPath, URL } from 'node:url'
import path from 'node:path' // 正确引入 path 模块
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')], // 图标目录symbolId: 'icon-[dir]-[name]', // 命名规则inject: 'body-last',          // 注入位置customDomId: '__svg__icons__dom' // DOM ID})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

3. 在入口文件引入（main.js）

全局注册自定义SVG组件。

import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue'app.component('svg-icon', SvgIcon)

4.组件中使用（MenuItem.vue）

将之前菜单的统一图标，换成svg，根据后端返回的结果，动态显示。

<template><div v-if="!item.hidden"><template v-if="hasChildren"><el-sub-menu :index="item.path"><template #title><svg-icon :icon-class="item.meta && item.meta.icon"/><span>{{ item.meta?.title }}</span></template><template v-for="child in item.children" :key="child.path"><MenuItem :item="child" :level="level + 1" :base-path="resolvePath(item.path)" /></template></el-sub-menu></template><template v-else><el-menu-item :index="resolvePath(item.path)"><svg-icon :icon-class="item.meta && item.meta.icon" /><template #title><span>{{ item.meta?.title }}</span></template></el-menu-item></template></div>
</template>

5.自定义SVG组件（SvgIcon.vue）

src\components\SvgIcon\index.vue

<template><svg class="svg-icon" aria-hidden="true"><use :xlink:href="iconName" :fill="color" /></svg></template><script setup>import { computed } from 'vue'const props = defineProps({iconClass: {type: String,required: true},color: {type: String,default: ''}})const iconName = computed(() => `#icon-${props.iconClass}`)</script><style scoped lang="scss">.svg-icon {width: 1em;height: 1em;position: relative;fill: currentColor;vertical-align: -2px;}</style>

6.修改router/index.js

首页路由记录的图标也换成本地SVG。

  {path: '/',component: Layout,redirect: '/index',meta: { title: '首页', icon: 'dashboard', affix: true },children: [{path: 'index',component: () => import('@/views/index.vue'),meta: { title: '首页', icon: 'dashboard', affix: true }}]}

二.功能验证

运行项目，浏览器访问http://localhost:5173/index

三.知识点拓展

1、插件化开发（vite-plugin-svg-icons）

通俗理解：给项目安装一个"SVG图标转换器"
作用：

1. 自动扫描指定目录的SVG文件
2. 转换为可复用的<symbol>标签集合
3. 生成虚拟模块供全局使用

类比场景：
就像把散落的工具（单个SVG）整理到工具箱（symbol集合）中，随用随取

---

2、全局组件注册

实现代码：

// main.js
app.component('svg-icon', SvgIcon)

优势：

1. 任何地方无需导入即可使用<svg-icon>
2. 统一管理图标组件

---

3、动态属性绑定

核心代码：

<svg-icon :icon-class="item.meta?.icon" />

技术点：

1. : 简写实现动态属性传递
2. 可选链操作符?.防止未定义错误
3. 根据路由配置动态显示不同图标

---

4、计算属性（Computed）

代码片段：

const iconName = computed(() => `#icon-${props.iconClass}`)

作用：

1. 自动生成带前缀的图标ID
2. 依赖项变化时自动更新

---

5、样式继承机制

关键CSS：

.svg-icon {fill: currentColor;
}

特性：

1. 自动继承父级文字颜色
2. 通过color属性可覆盖
3. 实现主题色一键切换

示例：

<div style="color: blue"><svg-icon icon-class="home" /> <!-- 图标变蓝 -->
</div>

---

6、路由元信息（Meta）

路由配置：

meta: { icon: 'dashboard' }

应用场景：

1. 存储与路由相关的附加信息
2. 在导航菜单/面包屑中复用信息
3. 实现权限控制的扩展参数

---

7、组件化设计

组件结构：

SvgIcon.vue
├─ 模板：定义SVG使用方式
├─ 逻辑：处理图标名称
└─ 样式：控制图标外观

设计原则：

1. 单一职责：仅处理图标显示
2. 开放封闭：通过props接收参数
3. 复用性：全项目通用

---

8、现代前端工程化

涉及工具链：

1. Vite：快速构建工具
2. PNPM：高效包管理
3. PostCSS：样式处理

配置文件示例：

// vite.config.js
createSvgIconsPlugin({iconDirs: [path.resolve('src/assets/icons')] // 工程路径处理
})

---

9、响应式图标系统

工作原理：

优势：

1. 图标修改无需重新打包
2. 按需加载节省资源
3. 矢量缩放保证清晰度

---

四.思考