怎么在vue-cli引入js

要在Vue CLI中引入JS文件，可以使用以下几种方法：在main.js中全局引入、在单个组件中引入、在public/index.html中引入。其中一种常见且推荐的方法是在main.js中全局引入，因为这样可以确保在项目的任何地方都可以使用这个JS文件的功能。下面将详细描述这一方法，并在后续部分详细探讨其他方法和相关注意事项。

一、在`main.js`中全局引入

在Vue CLI项目中，main.js是项目的入口文件，因此在这里全局引入JS文件是一个很好的选择。这么做可以确保在项目的任何地方都可以使用这个JS文件的功能。假设我们有一个名为custom.js的JS文件，我们可以通过以下步骤在main.js中引入它。

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

这样，我们就可以在整个项目中使用custom.js中的功能了。

二、在单个组件中引入

有时候，我们并不需要在整个项目中都使用某个JS文件的功能，只需要在特定的组件中使用。这种情况下，我们可以选择在单个组件中引入该JS文件。

// MyComponent.vue
<template>
  <div>
    <!-- 组件模板 -->
  </div>
</template>
<script>
import custom from './custom.js' // 引入自定义的JS文件
export default {
  name: 'MyComponent',
  mounted() {
    custom.someFunction(); // 调用自定义JS文件中的函数
  }
}
</script>
<style scoped>
/* 组件样式 */
</style>

在这个示例中，我们在组件的<script>标签中引入了custom.js，并在mounted生命周期钩子中调用了它的一个函数。

三、在`public/index.html`中引入

另一种方法是直接在public/index.html文件中引入JS文件。这种方法适用于需要引入一些第三方库或者是一些全局性的JS文件。

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-cli project</title>
    <script src="/path/to/custom.js"></script> <!-- 引入自定义的JS文件 -->
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-cli project 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>

在这里，我们使用<script>标签在HTML文件的<head>部分引入了custom.js。这种方法的优点是简单直接，但缺点是无法很好地与Vue的组件体系融合。

四、在`webpack`配置中引入

如果你的项目中使用了webpack，可以在webpack配置中引入JS文件。这种方法适用于更复杂的项目结构，或者需要对引入的JS文件进行一些预处理。

// vue.config.js
module.exports = {
  configureWebpack: {
    entry: {
      app: './src/main.js',
      custom: './src/custom.js' // 指定自定义JS文件的入口
    }
  }
}

这样，webpack会自动处理并将custom.js打包到最终的输出文件中。

五、使用插件系统

Vue CLI提供了插件系统，可以通过插件的形式来引入和管理JS文件。这种方法更为灵活和模块化，适用于大型项目。

// vue.config.js
module.exports = {
  pluginOptions: {
    'my-plugin': {
      custom: './src/custom.js' // 指定自定义JS文件的位置
    }
  }
}

然后在插件的入口文件中引入这个JS文件：

// plugins/my-plugin/index.js
import custom from './src/custom.js'
export default {
  install(Vue) {
    Vue.prototype.$custom = custom
  }
}

这样，在项目的任何地方都可以通过this.$custom来访问custom.js中的功能。

六、使用外部CDN

如果你需要引入的是一个外部库，可以选择使用CDN。在public/index.html文件中通过<script>标签引入外部库的CDN链接。

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-cli project</title>
    <script src="https://cdn.example.com/library.js"></script> <!-- 引入外部库的CDN链接 -->
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-cli project 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>

这种方法适用于那些不需要修改的第三方库，并且可以减少项目的打包体积。

七、使用ES模块

现代的JS项目通常使用ES模块系统来管理依赖。在Vue CLI项目中，你可以使用import语句来引入JS文件，这种方法更为现代和模块化。

// MyComponent.vue
<template>
  <div>
    <!-- 组件模板 -->
  </div>
</template>
<script>
import { someFunction } from './custom.js' // 从自定义的JS文件中导入特定的函数
export default {
  name: 'MyComponent',
  mounted() {
    someFunction(); // 调用导入的函数
  }
}
</script>
<style scoped>
/* 组件样式 */
</style>

通过使用import语句，你可以只引入JS文件中需要的部分，而不是全部，这样可以提高代码的可读性和维护性。

八、使用混入（Mixins）

Vue的混入（Mixins）是一种非常强大的特性，可以用来在多个组件之间共享逻辑。你可以将JS文件中的功能封装成一个混入，然后在需要的组件中使用它。

// mixins/customMixin.js
export default {
  methods: {
    someFunction() {
      // 自定义JS文件中的功能
    }
  }
}

然后在组件中使用这个混入：

// MyComponent.vue
<template>
  <div>
    <!-- 组件模板 -->
  </div>
</template>
<script>
import customMixin from './mixins/customMixin.js' // 引入自定义的混入
export default {
  name: 'MyComponent',
  mixins: [customMixin], // 使用混入
  mounted() {
    this.someFunction(); // 调用混入中的函数
  }
}
</script>
<style scoped>
/* 组件样式 */
</style>

通过使用混入，你可以在多个组件之间共享自定义JS文件中的功能，同时保持代码的模块化和可维护性。

九、使用Vue插件

如果你需要引入的JS文件是一个较大的库，并且需要在多个地方使用，那么将其封装成一个Vue插件是一个不错的选择。

// plugins/customPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$customFunction = function() {
      // 自定义JS文件中的功能
    }
  }
}

然后在main.js中注册这个插件：

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

这样，在项目的任何地方都可以通过this.$customFunction来访问自定义JS文件中的功能。

总结

在Vue CLI项目中引入JS文件有多种方法，每种方法都有其适用的场景和优缺点。在main.js中全局引入是一种常见且推荐的方法，因为它可以确保在项目的任何地方都可以使用这个JS文件的功能。其他方法如在单个组件中引入、在public/index.html中引入、使用webpack配置、使用插件系统、使用外部CDN、使用ES模块、使用混入和使用Vue插件，都可以根据具体需求和项目结构来选择使用。希望通过本文的详细介绍，你可以找到最适合自己项目的方法，有效地在Vue CLI中引入和管理JS文件。