跳到主要内容

2 篇博文 含有标签「前端」

查看所有标签

· 阅读需 1 分钟
JaguarJack

更新依赖版本

查看依赖版本

npm outdated

// 可以看到项目依赖的版本情况
Package Current Wanted Latest Location Depended by
@element-plus/icons-vue 1.1.4 1.1.4 2.0.6 node_modules/@element-plus/icons-vue catchadmin-pro
@types/node 17.0.45 17.0.45 18.0.4 node_modules/@types/node catchadmin-pro
@vitejs/plugin-vue 2.3.3 2.3.3 3.0.0 node_modules/@vitejs/plugin-vue catchadmin-pro
@vitejs/plugin-vue-jsx 1.3.10 1.3.10 2.0.0 node_modules/@vitejs/plugin-vue-jsx catchadmin-pro
unplugin-auto-import 0.7.2 0.7.2 0.9.3 node_modules/unplugin-auto-import catchadmin-pro
unplugin-vue-components 0.19.9 0.19.9 0.21.1 node_modules/unplugin-vue-components catchadmin-pro
vite 2.9.14 2.9.14 3.0.0 node_modules/vite catchadmin-pro
vue-tsc 0.34.17 0.34.17 0.38.5 node_modules/vue-tsc catchadmin-pro

更新依赖

yarn upgrade

通过该命令可以升级依赖,然后通过上面的命令继续查看下,如果发现devDependencies没有更新的话,可以根据latest手动修改版本之后,再执行命令

yarn

就可以完成项目的依赖升级了

· 阅读需 2 分钟
JaguarJack

原因

为什么要使用第三方的图标?因为 ElementPlusicon 实在是太少了,不够用。hreIcons 感觉还可以,并且可以很好的和 tailwindcss 集合,图标数量也有 230+ ,感觉能满足后台需求。所以整个项目为了 icon 统一,就去除了 ElementPlus Icon 了,统一使用 heroIcons

安装

yarn add @heroicons/vue  

使用

为了统一使用,并且为了之后的动态 icon 做铺垫,所以这里需要二次封装下。创建 src/icon/index.vue 组件。

<template>
<component :is="icon" class="ct-w-5 ct-h-5"/>
</template>

<script>
import { defineComponent } from 'vue'
import * as heroIcons from '@heroicons/vue/outline'
export default defineComponent({
name: 'icon',
props: {
name: {
type: String,
required: true
}
},
setup (props, ctx) {
let name = ''

props.name.split('-').forEach(v => {
name += v[0].toUpperCase() + v.substr(1)
})

const icon = heroIcons[name + 'Icon']

return {
icon
}
}
})
</script>

创建完成之后,为了可以全局使用,需要注册在 vue 中注册下,还是找到后台的入口 utils/catchadmin.ts

import icon from '@/components/icon/index.vue'


// 找到 registerComponents 方法,注册
protected registerComponent () : CatchAdmin {
this.app.component('icon', icon)

return this
}

注册完成之后,就可以全局使用了,例如这样

<Icon name="logout"/>

当然这个使用是有一个小小弊端,修改之后无法立即刷新图标,但是这个应该不是什么大问题,因为图标是静态的。 当然如果你不喜欢这样,也可以直接在页面中引入 heroIcons

<template>
<div>
<BeakerIcon class="h-5 w-5 text-blue-500"/>
<p>...</p>
</div>
</template>

<script>
import { BeakerIcon } from '@heroicons/vue/solid'

export default {
components: { BeakerIcon }
}
</script>