vite -vuex3.0动态路由增加 vue3.0组件引入图片引入

最新推荐文章于 2024-07-30 22:59:19 发布

web修理工

最新推荐文章于 2024-07-30 22:59:19 发布

阅读量206

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42374676/article/details/128110637

版权

文章介绍了在Vue项目中如何获取assets目录下的静态资源，包括使用import.meta.globEager进行预加载，以及通过URL和import.meta.url动态获取资源。同时，文章还讨论了组件的导入方式，包括同步和异步组件的定义，以及在setup语法中的使用。

摘要由CSDN通过智能技术生成

// 获取assets静态资源
export default const getAssetsHomeFile = (url: string) => {
    const path = `../assets/images/home/${url}`;
    const modules = import.meta.globEager("../assets/images/home/*");
    return modules[path].default;
}

使用

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsHomeFile = Pub.getAssetsHomeFile 
  return { getAssetsHomeFile }
}

<img :src="getAssetsHomeFile('home_icon.png')" />

工具文件目录： src/util/pub-use.ts
pub-use.ts

// 获取assets静态资源
export default  const getAssetsFile = (url: string) => {
   return new URL(`../assets/images/${url}`, import.meta.url).href
}

使用

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsFile = Pub.getAssetsFile
  return { getAssetsFile }
}

单个文件夹

import homeIcon from '@/assets/images/home/home_icon.png'

<img :src="homeIcon" />

参考:https://blog.csdn.net/weixin_42804664/article/details/124443667

参考:https://blog.csdn.net/dreamingbaobei3/article/details/116227272

ts setup

<script lang="ts" setup >
import compantName from "@/compantName"

</script>

sep

<script lang="ts" >
import compantName from "@/compantName"

</script>

<script lang='ts'>
export default defineComponent({
  ${name ? `name: "${name}",` : ''}
})
</script>

setup

<script setup>
import { ref } from 'vue'

const text = ref('点击')

const handleClick = () => {
  console.log('click')
}
</script>

<template>
  <button @click="handleClick">{{ text }}</button>
</template>

<script setup>
import CustomComponent from './CustomComponent/main.vue'
</script>

<template>
  <CustomComponent></CustomComponent>
</template>

特例

export {default as ElMain} from “./main”
export {default as Sidebar} from “./sidebar”
export {default as ElHeader} from “./header”

// 不带选项的异步组件
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// 带选项的异步组件
const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
}) 

作者：_清欢l
链接：https://juejin.cn/post/7032191080745402405
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。