vue项目的html如何引进public里面的js文件

Vue项目中,我们可以将静态资源(例如图片、样式表、JavaScript文件等)放在public文件夹中,然后在HTML中通过引入该文件夹中的文件来使用它们。以下是引入public文件夹中JavaScript文件的详细步骤:

1.将需要引入的JavaScript文件放在public文件夹中(例如,创建一个名为script.js的文件)。

2.在HTML模板中添加以下代码,在body标签的闭合前引入script.js:

<body>
  ...
  <script src="<%= BASE_URL %>script.js"></script>
</body>

在Vue项目中,可以通过<%= BASE_URL %>来获取基础链接,该链接会根据开发环境或生产环境的变化而改变。

3.将需要在JavaScript文件中使用的全局变量或方法添加到Vue实例的原型上,以使之在Vue组件中可以全局访问。以下示例演示了如何在Vue实例中添加一个名为toast的全局方法,并在组件中调用:

// 在src/main.js中
import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$toast = function (message) {
  // 显示一个toast提示框
}

new Vue({
  render: h => h(App),
}).$mount('#app')
// 在Vue组件中调用
<template>
  <div>
    <button @click="$toast('Hello World!')">Click Me</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  mounted() {
    this.$toast('Mounted!');
  }
}
</script>

以上是一个添加全局方法的示例,你可以根据实际需求添加自己需要的全局变量或方法。

综上所述,这就是详细的Vue项目中引入public文件夹JavaScript文件的完整攻略,其中包含了两个示例。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue项目的html如何引进public里面的js文件 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue-cli入门之项目结构分析

    vue-cli入门之项目结构分析 1. vue-cli简介 vue-cli是一个vue.js项目脚手架,它可以帮我们快速生成项目骨架,提供了一套完整的项目搭建和工作流解决方案。vue-cli被广泛使用,能够帮助开发者提高开发效率和代码质量。 2. vue-cli的安装 我们可以通过npm安装vue-cli,全局安装后在命令行输入 vue 即可查看vue-cl…

    Vue 2023年5月28日
    00
  • vue与bootstrap实现时间选择器的示例代码

    首先,为了使用Vue和Bootstrap实现时间选择器,我们需要引入必要的资源文件。在该页面的标签中,我们可以添加以下代码: <!– 引入bootstrap样式文件 –> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-boot…

    Vue 2023年5月29日
    00
  • Vue的export default和带返回值的data()及@符号的用法说明

    我来详细讲解一下Vue中的”export default”、带返回值的”data()”及”@符号”的用法说明。 export default 在Vue中,如果我们需要把一个Vue组件公开成一个模块(module),我们可以使用JavaScript的”export”语句。在Vue中,我们通常使用”export default”来导出一个Vue组件。 示例1: …

    Vue 2023年5月27日
    00
  • Vue学习之组件用法实例详解

    Vue学习之组件用法实例详解 1. 组件的定义与引用 组件是一种抽象的概念,它可以将一些共用的逻辑和界面封装起来,形成一个独立的组件,供其他部分进行复用。在Vue中,组件既可以全局注册,也可以按需注册。 1.1 全局注册组件 全局注册组件是指在Vue实例化之前定义好组件,这样后面的任何Vue实例都可以使用这个组件。 Vue.component(‘compon…

    Vue 2023年5月27日
    00
  • Vue.js中轻松解决v-for执行出错的三个方案

    下面是对“Vue.js中轻松解决v-for执行出错的三个方案”的完整攻略。 问题背景 在使用 Vue.js 进行开发过程中,我们经常会使用 v-for 来遍历一个数据列表,并生成对应的视图。但是,在某些情况下,我们可能会遇到 v-for 执行出错的问题,这时我们需要使用一些方法来解决这个问题。 问题示例 以下是一个常见的使用 v-for 遍历数组的示例: &…

    Vue 2023年5月28日
    00
  • Vue data的数据响应式到底是如何实现的

    那么让我们来详细讲解一下Vue data的数据响应式实现的攻略。 什么是Vue数据响应式? Vue框架的核心功能之一就是数据响应式。所谓数据响应式,是指当Vue中的某个数据发生变化时,框架可以自动更新依赖这个数据的视图。 Vue数据响应式的实现原理 Vue数据响应式的实现原理主要包括两部分: Object.defineProperty Vue数据响应式是通过…

    Vue 2023年5月27日
    00
  • vue踩坑记录:属性报undefined错误问题

    当你使用Vue.js构建自己的应用时,可能会遇到属性报undefined错误问题,这种问题会造成很大的困扰。下面让我们详细讲解一下怎么解决这个问题。 问题原因 首先我们需要明确这个错误的原因,常见的错误原因有以下几种: 将变量名写错了。 Vue组件的作用域问题。 Vue组件内部的变量和外部的变量命名冲突问题。 快速解决 如果您遇到属性报undefined错误…

    Vue 2023年5月27日
    00
  • 一文带你搞懂Vue3的基本语法

    一文带你搞懂Vue3的基本语法 Vue.js是一款流行的前端JavaScript框架,Vue.js 3是Vue.js框架的最新版本,其基本语法与Vue.js 2有许多不同之处。 创建Vue应用程序 要创建一个Vue应用程序,您需要创建一个Vue实例。您可以使用Vue.createApp()方法来创建Vue实例。以下是一个基本的Vue应用程序示例: <d…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部