vue3中的public目录和assets目录
阅读数:83 评论数:0
跳转到新版页面分类
html/css/js
正文
一、概述
在 Vue 3 中，public 目录和 assets 目录用于不同的目的。
二、public目录
1、不需要经过 Webpack 处理的静态资源。
例如，你可能会在这里放置 favicon.ico、robots.txt、一些图标集或者一些大型的图像等。
2、在构建应用程序时，public 目录下的文件会被复制到输出目录（通常是 dist）中的相同位置。
3、这些文件可以通过绝对路径直接访问，因为它们会保持原有的文件结构和文件名。
例如，如果你有一个位于 public/images/logo.png 的图像，你可以在你的 Vue 模板中通过 /images/logo.png 直接引用它。
三、assets目录
1、是用来存放那些需要经过 Webpack 处理的文件，例如样式表、JavaScript 文件、预处理器文件（如 SASS/SCSS、LESS）、以及需要优化的图像等。
2、在组件中通过相对路径引用 assets 监录中的资源时，Webpack 会处理它们。例如，它可以将较小的图像转换为 Base64 字符串直接嵌入到你的样式表中，或者在构建过程中压缩图片文件。
3、组件中，你会这样引用 assets 目录下的文件：
<template>
<img :src="require('@/assets/images/logo.png')" />
</template>
或者使用 ES6 模块导入语法：
import logo from '@/assets/images/logo.png';
然后在模板中使用变量：
<template>
<img :src="logo" />
</template>
相关推荐
一、生命周期
1、vue2生命周期
beforeCreate #实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
created #实例创建完成后被立即同步调用
beforeMount #
一、使用pnpm新建项目
可以使用npm 或yarn或pnpm来初始化Vite项目
pnpm create vite xxx(项目名称)
#选择vue
#选择js
cd xxx (进入项目目录)
#安
一、概述
<script setup> 是在单文件组件（SFC）中使用组合式API的编译时语法糖，解决Vue3.0中setup需要频繁将声明的变量、函数以及import引入的内容通过return向外
一、概述
在vue2中，data函数里返回的值直接为响应式，但在vue3中我们需要使用一些函数才能达到这个效果。
setup函数中拿不到vue的this。
二、常用函数
<template>
<d
缓存页面主要Jul为了防止重复渲染dom，减少加载时间及性能消耗，提高用户体验。
一、旧版的语法
<keep-alive>
<router-view v-if="$route.meta.kee
一、在main.js挂载
import { createApp } from 'vue'
import App from './App.vue'
import router from './route
一、概述
在vue3中没有$refs这个对象，可以使用如下方法
<template>
<div><input type="text" ref="txt1" value="hello" /></div>
方式一、全局引入
全局引入element之后事，element已经在app.config.globalProperties添加了全局方法$message，所以可以在组件中直接使用。
方式二、按需引入
一、useRouter传参的方式
1、隐匿传参params
import { useRouter } from 'vue-router'
export default {
setup() {