vue 里如何引入公共js

在Vue项目中引入公共JS文件的方法有多种，主要包括以下几种：1、在main.js中引入，2、在组件中直接引入，3、通过插件方式引入。下面将详细描述这些方法，并提供具体的步骤和示例代码。

一、在main.js中引入

在Vue项目的入口文件main.js中引入公共JS文件是最常见的方法。这种方法的优点是公共JS文件可以在整个项目中使用。

步骤：

在项目的src目录下创建一个公共JS文件，例如public.js。
在public.js文件中编写需要的公共函数或变量。
在main.js中引入public.js文件。

示例代码：

// src/public.js
export function commonFunction() {
  console.log('This is a common function');
}
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import { commonFunction } from './public'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  mounted() {
    commonFunction();
  }
}).$mount('#app')

二、在组件中直接引入

在单个组件中直接引入公共JS文件，可以让该组件直接使用公共函数或变量。这种方法适用于只在某些特定组件中使用公共JS文件的情况。

步骤：

在项目的src目录下创建一个公共JS文件，例如public.js。
在public.js文件中编写需要的公共函数或变量。
在需要使用公共JS文件的组件中引入public.js文件。

示例代码：

// src/public.js
export function commonFunction() {
  console.log('This is a common function');
}
// src/components/MyComponent.vue
<template>
  <div>
    <button @click="useCommonFunction">Click me</button>
  </div>
</template>
<script>
import { commonFunction } from '@/public';
export default {
  name: 'MyComponent',
  methods: {
    useCommonFunction() {
      commonFunction();
    }
  }
}
</script>

三、通过插件方式引入

如果有多个公共函数或变量需要在多个组件中频繁使用，可以将它们封装成一个Vue插件，然后在项目中全局引入。这种方法可以使代码更加模块化和可维护。

步骤：

在项目的src目录下创建一个公共JS文件，例如public.js。
在public.js文件中编写需要的公共函数或变量，并将其封装成一个Vue插件。
在main.js中引入并使用该插件。

示例代码：

// src/public.js
const MyPlugin = {
  install(Vue) {
    Vue.prototype.$commonFunction = function() {
      console.log('This is a common function');
    }
  }
};
export default MyPlugin;
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import MyPlugin from './public'
Vue.config.productionTip = false
Vue.use(MyPlugin);
new Vue({
  render: h => h(App),
}).$mount('#app')
// src/components/MyComponent.vue
<template>
  <div>
    <button @click="useCommonFunction">Click me</button>
  </div>
</template>
<script>
export default {
  name: 'MyComponent',
  methods: {
    useCommonFunction() {
      this.$commonFunction();
    }
  }
}
</script>

四、通过外部库引入公共JS文件

有时我们需要引入外部的JS库，而不仅仅是项目内部的公共JS文件。这种情况下，可以通过在项目的public/index.html文件中直接添加script标签，或者在main.js中通过import语句来引入。

步骤：

在项目的public/index.html文件中添加script标签，或在main.js中通过import语句引入外部JS库。
在组件中使用外部JS库的功能。

示例代码：

<!-- public/index.html -->
<!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>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
</body>
</html>

// src/main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  mounted() {
    console.log(_.join(['Hello', 'world'], ' '));
  }
}).$mount('#app')

五、通过Vue CLI配置全局变量

使用Vue CLI，我们可以在项目的vue.config.js文件中配置全局变量，使得这些变量在项目中的任何地方都可以使用。

步骤：

在项目根目录创建或修改vue.config.js文件。
配置全局变量。
在组件中使用全局变量。

示例代码：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        _: 'lodash'
      })
    ]
  }
};
// src/components/MyComponent.vue
<template>
  <div>
    <button @click="useLodash">Click me</button>
  </div>
</template>
<script>
export default {
  name: 'MyComponent',
  methods: {
    useLodash() {
      console.log(_.join(['Hello', 'world'], ' '));
    }
  }
}
</script>

总结起来，在Vue项目中引入公共JS文件的方法有多种，可以根据具体需求选择合适的方法。通过在main.js中引入、在组件中直接引入、通过插件方式引入、通过外部库引入以及通过Vue CLI配置全局变量等方式，都可以实现公共JS文件的引入和使用。希望这些方法能够帮助你在Vue项目中更好地管理和使用公共JS文件。

相关问答FAQs：

1. 在Vue中如何引入公共JS文件？

在Vue中，你可以通过以下几种方式来引入公共JS文件：

方法一：使用script标签

在你的Vue组件中，可以使用<script>标签来引入公共JS文件。例如，如果你的公共JS文件是common.js，你可以在Vue组件的<script>标签中添加以下代码：

<script src="/path/to/common.js"></script>

这将会在Vue组件加载时自动引入并执行common.js文件中的代码。

方法二：使用Vue插件

你可以将公共JS文件封装成一个Vue插件，并在Vue应用中引入该插件。首先，创建一个名为common.js的文件，里面包含你的公共JS代码。然后，在你的Vue组件中，使用Vue.use()方法引入该插件。例如：

// common.js

export default {
  install(Vue) {
    // 公共JS代码
    // ...
  }
}

// main.js

import Vue from 'vue'
import CommonPlugin from './common.js'

Vue.use(CommonPlugin)

这样，公共JS代码将会在Vue应用初始化时自动执行。

方法三：使用import语句

如果你使用了ES6模块化的语法，可以使用import语句来引入公共JS文件。首先，将你的公共JS代码封装成一个模块。然后，在你的Vue组件中使用import语句引入该模块。例如：

// common.js

export function commonFunction() {
  // 公共JS代码
  // ...
}

// YourComponent.vue

<template>
  <!-- Vue模板代码 -->
</template>

<script>
import { commonFunction } from './common.js'

export default {
  // Vue组件的其他代码
}
</script>

这样，你就可以在Vue组件中直接使用公共JS代码了。

希望这些方法能帮助到你在Vue中引入公共JS文件的问题。如果你有其他问题，请随时提问。

文章标题：vue 里如何引入公共js，发布者：飞飞，转载请注明出处：https://worktile.com/kb/p/3643882

vue 里如何引入公共js

一、在main.js中引入

二、在组件中直接引入

三、通过插件方式引入

四、通过外部库引入公共JS文件

五、通过Vue CLI配置全局变量

相关问答FAQs：

发表回复