vue3项目使用静态资源-CSDN博客

本文链接：https://blog.csdn.net/wh_xia_jun/article/details/148633110

在组件中，有时需要引用一些静态资源，例如图片资源、CSS代码资源等。通过项目的public目录和src\assets目录都可以存放静态资源，但引用静态资源的方式不同。

public目录

public目录用于存放不可编译的静态资源文件，该目录下的文件会被复制到打包目录，该目录下的文件需要使用绝对路径访问。

在组件中引用public目录中的demo.png文件，示例代码如下。

src\assets目录

src\assets目录用于存放可编译的静态资源文件，例如图片、样式文件等。该目录下的文件需要使用相对路径访问。

在引用src\assets目录中的图片时，首先将图片保存到本地，然后使用import语法将图片导入需要的组件，最后通过img元素的src属性添加图片的路径。

<template>
  <img :src="icon">
</template>
<script setup>
import icon from '../assets/vue.svg'
</script>

element plus

首先安装element plus ，在src\main.js文件中，导入并挂载Element Plus模块，即可在项目中用它。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import App from './App.vue'
import Axios from 'axios'



const app=createApp(App)
app.use(router)
app.use(createPinia())
app.use(ElementPlus)
app.mount('#app')