《vue3+ts+element-plus 后台管理系统系列六》之样式和icon

vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。

• 演示地址：https://admin-tmpl.rencaiyoujia.com/
• github地址：https://github.com/rcyj-FED/vue3-composition-admin

项目css 使用sass进行开发，关于icon图标则使用阿里的iconfont symbol引用的方式。

全局样式

代码引用 @/styles

• _mixins.scss : 混入的样式
• _transition.scss ： 动画
• _variables.scss : 全局变量
• _element-vaiables.scss ：element 主题颜色

在Typescript & Javascript使用变量

sass 支持面向对象的css，在Vue模板里需要直接设置颜色，为了更好的复用。可以直接引用全局sass变量。

具体可以查看文章：Typescript & Javascript 中使用Sass变量

iconfont

阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

公司现在也在使用iconfont，自己的项目使用更加方便。不了解的可以看下官网。

iconfont官网：点我传送

iconfont三种接入方式：

• unicode
• font-class
• symbol

查看优缺点介绍的很清楚插眼传送，项目需要多彩icon所以使用symbol。