Vue3+Ts项目中语法警告解决以及如何配置使用svg

 如果在项目当中遇到因为ts语法造成的波浪线警告,可以通过// @ts-ignore进行解决

 Vue3+Ts项目中语法警告解决以及如何配置使用svg_第1张图片

 或者在vite-env.d.ts文件 前面的 declare module+后面是直接将其他文件爆红引入的路径复制过来,也可解决。

关于配置svg文件:

首先安装插件

npm i vite-plugin-svg-icons -D

Vue3+Ts项目中语法警告解决以及如何配置使用svg_第2张图片

 然后在入口文件进行配置

Vue3+Ts项目中语法警告解决以及如何配置使用svg_第3张图片

 如果运行出现报错

Vue3+Ts项目中语法警告解决以及如何配置使用svg_第4张图片

 使用以下指令安装一下,在运行即可

 npm i fast-glob

然后去阿里巴巴矢量图库,找到要使用的图标,点击下载,然后依次设置好颜色,大小,最后复制svg代码 

Vue3+Ts项目中语法警告解决以及如何配置使用svg_第5张图片

Vue3+Ts项目中语法警告解决以及如何配置使用svg_第6张图片

 组件内基础使用

Vue3+Ts项目中语法警告解决以及如何配置使用svg_第7张图片

 效果如下:

 以上方法应用于项目当中比较繁琐,所以可以进行封装使用

新建一个图标组件进行封装

 

Vue3+Ts项目中语法警告解决以及如何配置使用svg_第8张图片

Vue3+Ts项目中语法警告解决以及如何配置使用svg_第9张图片

 效果如下:

 

你可能感兴趣的:(vue.js,前端,javascript)