VUE项目中引入JS文件的方法总结

下面是详细讲解“VUE项目中引入JS文件的方法总结”的完整攻略。

一、VUE项目中引入JS文件的方法总结

在VUE项目中，我们常常需要引入外部的JS文件。下面总结了一些VUE项目中引入JS文件的不同方法，具体如下：

1. 通过script标签引入

在html文件中通过script标签直接引入JS文件。这种方式比较直接简单，但是不够灵活。我们可以在index.html文件中引入JS文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue App</title>
    <script src="./js/test.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2. 通过Vue插件引入

Vue插件是一个拥有install方法的对象。我们可以创建一个Vue插件，在其中引入JS文件，然后将该插件安装到VUE实例中。

// js/plugin/testPlugin.js
import test from '../test.js'
export default {
  install(Vue, options) {
    Vue.prototype.$test = test
  }
}

// main.js
import Vue from 'vue'
import testPlugin from './js/plugin/testPlugin'
import App from './App.vue'

Vue.use(testPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

在这个插件中，我们引入了test.js文件，并将其作为Vue的原型属性$test暴露出来。然后通过Vue.use()进行安装，在项目中就可以通过this.$test来访问了。

3. 通过ES6模块引入

ES6模块方式需要注意的是，在VUE项目中需要使用babel进行编译。我们在需要使用test.js的文件中，使用ES6的import语法进行引入：

// App.vue
import {add} from './js/test.js'

export default {
  name: 'app',
  methods: {
    test() {
      console.log(add(1, 2))
    }
  }
}

在这个方法中，我们使用ES6的import语法引入了test.js中的add函数，并在test方法中使用它。

二、示例说明

下面提供两个示例，让我们更直观的了解上面方式的使用：

示例1 - 通过script标签引入

我们可以在index.html文件中添加如下代码，引入外部的test.js：

<html>
  <head>
    <meta charset="utf-8">
    <title>Vue App</title>
    <script src="./js/test.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

然后在vue组件中，可以直接使用test.js中的函数：

// App.vue
export default {
  name: 'app',
  created() {
    console.log(add(1, 2))
  }
}

示例2 - 通过Vue插件引入

我们可以在项目中创建一个testPlugin.js文件，将test.js作为Vue插件进行引入：

// js/plugin/testPlugin.js
import test from '../test.js'
export default {
  install(Vue, options) {
    Vue.prototype.$test = test
  }
}

// main.js
import Vue from 'vue'
import testPlugin from './js/plugin/testPlugin'
import App from './App.vue'

Vue.use(testPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

然后在vue组件中，可以使用this.$test访问test.js中的函数：

// App.vue
export default {
  name: 'app',
  created() {
    console.log(this.$test.add(1, 2))
  }
}

以上就是VUE项目中引入JS文件的方法总结，希望能对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：VUE项目中引入JS文件的方法总结 - Python技术站