vue前端项目中怎么将静态资源public中内容引入

属于路径问题

在页面资源或者其他文件夹下的资源,我们可以通过相对路径的方式进行引用,例如“…/user/index.js”就表示在当前文件位置的上一级目录下的index.js文件。那么我们在一个vue项目中将公共的一些图片资源或者其他资源存的时候,通过相对路径就过于复杂了。可以参考下面这种写法。

路径引用

在这里插入图片描述
获取public下的图片文件夹中一张图片。

   <img v-else src="img/3uqiY3.jpg" alt="头像" width='80' height='80' style='border-radius: 50%'/>

src=“ ”一个斜杠就表示资源定位到public下

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue项目引入H5Plus.js,可以通过以下步骤进行: 1. 安装H5Plus.js:首先,将H5Plus.js的文件(通常是一个js文件)下载到你的项目。你可以将H5Plus.js的文件放置在项目静态资源目录,如`public`或`assets`目录。 2. 创建Vue插件:在Vue项目,你可以创建一个自定义的插件来引入H5Plus.js。在你的项目创建一个新的js文件,例如`h5plus.js`。 3. 在`h5plus.js`文件,使用`import`语句引入H5Plus.js的文件,例如: ```javascript import H5Plus from '@/path/to/h5plus.js'; ``` 确保将`@/path/to/h5plus.js`替换为实际的H5Plus.js文件路径。 4. 创建Vue插件对象并添加全局方法:在`h5plus.js`文件,创建一个Vue插件对象,并使用`Vue.prototype`添加全局方法或属性。例如: ```javascript const H5PlusPlugin = { install(Vue) { Vue.prototype.$h5plus = H5Plus; // 将H5Plus对象挂载到Vue原型上,以便在Vue实例访问 } }; export default H5PlusPlugin; ``` 在上述代码,我们将H5Plus对象挂载到Vue原型上,这样在Vue实例就可以通过`this.$h5plus`来访问H5Plus.js提供的功能。 5. 在Vue项目使用插件:在Vue项目的入口文件(通常是`main.js`),使用`Vue.use()`方法引入自定义的插件。例如: ```javascript import Vue from 'vue'; import H5PlusPlugin from '@/path/to/h5plus.js'; Vue.use(H5PlusPlugin); ``` 确保将`@/path/to/h5plus.js`替换为实际的`h5plus.js`文件路径。 6. 在Vue组件使用H5Plus.js:现在,你可以在Vue组件通过`this.$h5plus`来访问H5Plus.js提供的功能。例如: ```javascript export default { mounted() { // 使用H5Plus.js的功能 this.$h5plus.someFunction(); } }; ``` 在上述代码,我们在Vue组件的`mounted`生命周期钩子函数使用`this.$h5plus`来调用H5Plus.js的某个功能。 请注意,以上步骤是一种通用的引入H5Plus.js的方法,具体的实现方式可能会因项目配置和需求而有所不同。确保根据你的项目情况进行相应的调整和配置。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值