静态资源配置

静态资源：如图片、样式、iconfont、字体样式等

1.图片资源- 把images 文件夹放到 assets 目录下
2.样式资源- 把 common.scss 文件放到 styles 目录下
3.iconfont资源-把iconfont资源包下载放在iconfont目录下

样式资源

在main.ts中将common.scss引入,如下

// import './assets/main.css'//坑：注意一定要把vue原有的样式注释调
//引入初始化样式文件
import '@/styles/common.scss';

iconfont资源

资源包下载： iconfont：传送门

将iconfont资源包文件放入到iconfont目录下，如下图：

在main.ts中将iconfont的css样式和js引入，如下：

import "@/assets/iconfont/iconfont.css";
import "@/assets/iconfont/iconfont.js";

如果开发中会频繁加入图标：在index.html中使用link引入font class在开发时比较方便，但开发完后应在main.ts中引入代码

link中href的获取：

自动导入

在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中，正常组件中使用，需要先导入scss文件，再使用内部的变量，比较繁琐，自动导入可以免去手动导入的步骤，直接使用内部的变量

配置自动导入方法：

1.在src/styles下新增一个 var.scss 文件，存入色值变量，如图：

//这里只放一些组件共享色值哈，这里只取了一部分色值哈
$backgroundColor: #E8E8E8;//全局背景色
$navBackgroundColor: #F7F7F7;//顶部导航栏背景色
$footerBackgroundColor: #F7F7F7;//底部导航栏背景色
$dividerColor: #E8E8E8;//分割线颜色
$modelBackgroundColor: #000000;//模块背景色
$mainColor: #ED7879;//主题色
$btnColor: #000000;//按钮文字、模块图标形状颜色
$linkColor: #666666;//返回上一页箭头、列表处进入下一页箭头
$warnColor: #ED7879;//重要提示、标签

2.通过 vite.config.js 配置自动导入文件

测试：

<script setup lang="ts">
</script>

<template>
    <div class="share"></div>
    <RouterView/>
</template>

<style scoped lang="scss">
    /*坑：一定要为style标签指定语法，如果指定为sass语法，这里写scss不是sass哈！！！！*/
    .share {
        width: 100px;
        height: 100px;
        background: $sucColor;
    }
</style>

vue3 静态资源配置和自动导入

静态资源配置

样式资源

iconfont资源

自动导入