Vite+Vue3+TypeScript+Element Plus (七) 搭建企业级轻量框架实践
前言
上一章讲解静态图标库Iconify在开发中能大大提升开发效率。本章讲解Iconify的动态使用方法。动态图标使用场景最常见的就是动态路由。数据中会包含图标的名称例如：
meta: { title: '首页', icon: 'ri:home-2-line' }通过'ri:home-2-line'渲染图标
推荐阅读
vite.config.ts 之 Plugins 篇 (六)
vite.config.ts 之 Plugins 篇 (七)
vite-plugin-purge-icons
安装
# 选择一个你喜欢的包管理器 # NPM npm install @iconify/iconify @iconify/json vite-plugin-purge-icons -D # Yarn yarn add @iconify/iconify @iconify/json vite-plugin-purge-icons -D # PNPM pnpm install @iconify/iconify @iconify/json vite-plugin-purge-icons -D 复制代码
配置
// unplugin.ts import PurgeIcons from 'vite-plugin-purge-icons' export function configVuePurgeIconsPlugin() { return PurgeIcons({ /* PurgeIcons Options */ // globs for searching source file to analyze content: ['**/*.vue'], // scan for .vue file as well format: 'mjs', }) } 复制代码// main.ts import { createApp } from 'vue' import App from './App.vue' import '@purge-icons/generated' // <-- This createApp(App).mount('#app') 复制代码使用
// App.vue <script setup lang="ts" name="App"> </script> <template> <!-- assets/icons/vuejs-fill.svg --> <icon-custom-vuejs-fill /> <!-- https://icones.js.org/collection/ri --> <icon-ri-e-bike-2-fill/> <!-- 动态图标使用方法 --> <span class="iconify" data-icon="ri:translate" /> <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 复制代码运行
npm run dev 复制代码
打包
npm run build 复制代码
生成目录
npm install --global treer treer -e ./result.md -i "/node_modules|git|dist/" 复制代码
本章最终目录如下：
├─.eslintrc-auto-import.json ├─index.html ├─LICENSE ├─package.json ├─pnpm-lock.yaml ├─README.en.md ├─README.md ├─tsconfig.json ├─vite.config.ts ├─src | ├─App.vue | ├─env.d.ts | ├─main.ts | ├─components | | └HelloWorld.vue | ├─assets | | ├─logo.png | | ├─icons | | | └vuejs-fill.svg ├─public | └favicon.ico ├─config | ├─index.ts | ├─unplugin | | ├─auto-imports.d.ts | | └components.d.ts | ├─plugins | | ├─compress.ts | | ├─imagemin.ts | | ├─index.ts | | ├─style.ts | | └unplugin.ts ├─.vscode | ├─extensions.json | └settings.json 复制代码
代码已经提交到Gitee
继续学习
废话只说一句：码字不易求个????，收藏 === 学会,快行动起来吧！????????????。
# Vite+Vue3+TypeScript+Element (八) 搭建企业级轻量框架实践（明天更新）
作者：前端污妖王
链接：https://juejin.cn/post/7067401562536017933