vue 中怎么引入js

在Vue中引入JavaScript文件的方法有多种，包括全局引入、局部引入以及通过插件和库引入。以下是详细介绍其中一种方法：

在Vue项目中，通过在main.js文件中全局引入JavaScript文件，可以确保在整个项目中都能访问到该文件的功能。这种方式特别适合需要在多个组件中使用的公共方法或库。

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import customJs from './path/to/your/custom.js' // 引入自定义的JavaScript文件
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

一、全局引入JavaScript文件

全局引入JavaScript文件的方式适合那些需要在整个项目中多次使用的公共函数或者库。通过这种方式引入的文件在每个组件中都可以直接使用。

1、在main.js中引入

在Vue项目的入口文件main.js中引入需要的JavaScript文件，这样可以确保该文件在项目启动时就被加载。

import Vue from 'vue'

import App from './App.vue'
import customJs from './path/to/your/custom.js' // 引入自定义的JavaScript文件
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

2、在Vue实例中使用

引入之后，可以在任何组件中直接使用这些全局方法。例如：

<template>

  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.message = customJs.someFunction(); // 使用引入的JavaScript文件中的方法
  }
}
</script>

二、局部引入JavaScript文件

如果某个JavaScript文件只在某个组件中使用，可以在该组件的<script>标签内引入。

1、在组件中引入

在需要使用该JavaScript文件的组件中，通过import语句引入。

<template>

  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
import customJs from './path/to/your/custom.js' // 只在当前组件中引入
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.message = customJs.someFunction(); // 使用引入的JavaScript文件中的方法
  }
}
</script>

2、使用引入的JavaScript文件

在组件的生命周期方法或其他方法中使用引入的JavaScript文件中的功能。例如：

<template>

  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
import customJs from './path/to/your/custom.js'
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.message = customJs.someFunction();
  }
}
</script>

三、通过插件和库引入

在Vue项目中，经常需要引入一些第三方库或插件，这些库或插件通常会包含一系列的JavaScript文件。可以通过以下几种方式引入这些库或插件。

1、通过npm或yarn安装

首先，通过npm或yarn安装需要的库。例如，安装lodash库：

npm install lodash

或

yarn add lodash

2、在main.js中引入

安装完成后，可以在main.js中引入这些库，并将其挂载到Vue实例上。

import Vue from 'vue'

import App from './App.vue'
import _ from 'lodash' // 引入lodash库
Vue.config.productionTip = false
Vue.prototype.$_ = _ // 将lodash挂载到Vue原型上，这样在组件中可以通过this.$_访问lodash
new Vue({
  render: h => h(App),
}).$mount('#app')

3、在组件中使用

在组件中，可以通过this.$_来使用lodash库提供的方法。

<template>

  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.message = this.$_.capitalize('hello world'); // 使用lodash的capitalize方法
  }
}
</script>

四、通过CDN引入

如果不想通过npm或yarn安装第三方库，也可以通过CDN引入。在public/index.html文件中添加对应的CDN链接。

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
  <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script> <!-- 引入lodash的CDN -->
</head>
<body>
  <noscript>
    <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

然后在组件中直接使用全局变量_。

<template>

  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.message = _.capitalize('hello world'); // 使用lodash的capitalize方法
  }
}
</script>

总结

在Vue项目中引入JavaScript文件的方法多种多样，包括全局引入、局部引入以及通过插件和库引入。这些方法各有优劣，选择合适的方法可以提高开发效率和代码的可维护性。全局引入适合那些需要在多个组件中使用的公共函数或库，而局部引入则更适合那些只在单个组件中使用的功能。此外，通过CDN引入第三方库也是一种简便的方法，尤其适合那些不需要本地安装的轻量级库。

相关问答FAQs：

如何在Vue中引入外部JS文件？

1. 如何在Vue的单文件组件中引入外部JS文件？
   在Vue的单文件组件中，可以通过在<script>标签中使用import语句来引入外部JS文件。例如，如果要引入名为example.js的外部JS文件，可以在<script>标签中添加以下代码：

import example from './example.js';

注意，这里的example.js是相对于当前单文件组件的路径。

2. 如何在Vue的HTML模板中引入外部JS文件？
   在Vue的HTML模板中，可以通过使用<script>标签来引入外部JS文件。例如，如果要引入名为example.js的外部JS文件，可以在HTML模板中添加以下代码：

<script src="example.js"></script>

请确保example.js文件与HTML模板位于相同的目录下，或者使用正确的相对路径。

3. 如何在Vue的全局范围内引入外部JS文件？
   在Vue的全局范围内，可以通过在main.js文件中引入外部JS文件来实现。例如，如果要引入名为example.js的外部JS文件，可以在main.js文件中添加以下代码：

import example from './example.js';
Vue.use(example);

这样，在整个Vue应用程序中都可以使用example.js中定义的功能。

请注意，无论在哪种情况下引入外部JS文件，都需要确保文件路径正确，并且JS文件已正确加载和解析。