vue怎么直接引入js文件

在 Vue 项目中直接引入 JS 文件的方法有多种，包括全局引入、局部引入、通过插件形式引入。下面将详细介绍其中一种方法：通过 Vue CLI 项目中的 main.js 文件全局引入。这种方法非常适合需要在整个项目中使用的 JS 库或文件。接下来，我们将详细讨论如何在 Vue 项目中灵活地引入和使用 JS 文件。

一、全局引入 JS 文件

在 Vue 项目中，全局引入 JS 文件通常是在项目的入口文件 main.js 中进行。这种方式使得 JS 文件中的内容可以在整个项目中使用。

1、修改 `main.js` 文件

在 Vue CLI 创建的项目中，main.js 文件是项目的入口文件。我们可以在这个文件中引入自定义的 JS 文件。

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

在这个例子中，我们将 custom.js 文件放在 assets/js/ 目录下，并在 main.js 文件中通过 import 语法将其引入。

2、在 JS 文件中添加代码

在 custom.js 文件中，我们可以编写任何需要的 JavaScript 代码。例如：

// custom.js
console.log('Custom JS file loaded');
// 示例函数
function greet(name) {
  console.log(`Hello, ${name}!`);
}
// 导出函数以便在其他地方使用
export { greet };

通过这种方式，我们可以在项目的任何地方使用 custom.js 文件中的内容。例如，在一个 Vue 组件中：

// 在一个 Vue 组件中使用 custom.js 中的函数
import { greet } from '@/assets/js/custom.js';
export default {
  name: 'ExampleComponent',
  mounted() {
    greet('World');
  }
}

二、局部引入 JS 文件

如果某个 JS 文件只在某个特定的 Vue 组件中使用，可以直接在该组件中引入。

1、在 Vue 组件中引入 JS 文件

在 Vue 组件中，我们可以使用 import 语法引入需要的 JS 文件。例如：

// ExampleComponent.vue
<template>
  <div>
    <h1>Example Component</h1>
  </div>
</template>
<script>
// 引入自定义的 JS 文件
import { greet } from '@/assets/js/custom.js';
export default {
  name: 'ExampleComponent',
  mounted() {
    greet('Vue Component');
  }
}
</script>
<style scoped>
/* 添加组件的样式 */
</style>

这种方法非常适合那些只在特定组件中使用的 JS 文件，可以避免全局污染。

三、通过插件形式引入 JS 文件

有时候我们需要将一些通用的功能封装成插件，以便在整个 Vue 项目中使用。这种方式不仅可以引入 JS 文件，还可以扩展 Vue 实例的功能。

1、创建一个 Vue 插件

首先，我们需要创建一个 Vue 插件文件。例如，创建一个名为 myPlugin.js 的文件：

// myPlugin.js
export default {
  install(Vue) {
    // 添加一个全局方法
    Vue.prototype.$myGlobalMethod = function (methodOptions) {
      console.log('This is a global method');
    }
    // 添加一个全局指令
    Vue.directive('my-directive', {
      bind(el, binding, vnode, oldVnode) {
        el.innerHTML = 'My Directive: ' + binding.value;
      }
    });
    // 添加一个混入
    Vue.mixin({
      created() {
        console.log('Global Mixin - Created Hook');
      }
    });
  }
}

2、在 `main.js` 文件中注册插件

接下来，我们需要在 main.js 文件中注册这个插件：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入自定义的插件
import MyPlugin from './plugins/myPlugin.js';
Vue.config.productionTip = false
// 使用插件
Vue.use(MyPlugin);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

通过这种方式，我们可以在整个项目中使用插件提供的功能。例如，在一个 Vue 组件中：

// ExampleComponent.vue
<template>
  <div>
    <h1 v-my-directive="'Hello World'">Example Component</h1>
  </div>
</template>
<script>
export default {
  name: 'ExampleComponent',
  mounted() {
    this.$myGlobalMethod();
  }
}
</script>
<style scoped>
/* 添加组件的样式 */
</style>

四、使用外部库

在实际开发中，我们经常需要引入一些外部库（如 Lodash、Moment.js 等）。这些库通常可以通过 npm 安装，然后在 Vue 项目中引入。

1、安装外部库

以 Lodash 为例，我们可以通过 npm 安装这个库：

npm install lodash

2、在 Vue 项目中引入 Lodash

我们可以在需要使用 Lodash 的地方引入它，例如在 main.js 文件中：

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入 Lodash
import _ from 'lodash';
Vue.config.productionTip = false
Vue.prototype.$_ = _;
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

通过这种方式，我们可以在 Vue 组件中使用 Lodash 提供的功能：

// ExampleComponent.vue
<template>
  <div>
    <h1>Example Component</h1>
  </div>
</template>
<script>
export default {
  name: 'ExampleComponent',
  mounted() {
    // 使用 Lodash
    const array = [1, 2, 3, 4, 5];
    const shuffledArray = this.$_.shuffle(array);
    console.log(shuffledArray);
  }
}
</script>
<style scoped>
/* 添加组件的样式 */
</style>

五、使用 Vue CLI 的配置文件

在某些情况下，我们可能需要在 Vue CLI 项目的配置文件中引入一些全局的 JS 文件。例如，可以在 vue.config.js 文件中进行配置：

1、修改 `vue.config.js` 文件

我们可以在 vue.config.js 文件中通过 chainWebpack 或 configureWebpack 方法进行配置。例如：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('provide')
      .use(require('webpack').ProvidePlugin, [{
        _: 'lodash'
      }])
  }
}

通过这种方式，我们可以在项目的任何地方使用 Lodash，而不需要在每个文件中单独引入。

六、总结

在 Vue 项目中引入 JS 文件的方法有很多，选择哪种方法取决于具体的需求和场景。全局引入、局部引入、通过插件形式引入、使用外部库和使用 Vue CLI 的配置文件都是常见的方法。希望通过本文的介绍，能够帮助大家在实际开发中更加灵活地引入和使用 JS 文件。