vue cli 如何引入js

在 Vue CLI 项目中引入 JavaScript 文件有多种方法，以下是其中的几种常见方法：1、在 main.js 中引入全局 JavaScript 文件；2、在组件中使用 import 语句引入；3、在 index.html 中直接通过 <script> 标签引入。

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

在 Vue CLI 项目的根目录下找到 src/main.js 文件，将需要的 JavaScript 文件通过 import 或 require 语句引入，适用于需要全局使用的脚本。例如：

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/js/myGlobalScript.js' // 引入全局 JavaScript 文件
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

二、在组件中使用 `import` 语句引入

如果 JavaScript 文件只在某个组件中使用，可以直接在该组件中引入。例如：

// src/components/MyComponent.vue
<template>
  <div>
    <!-- 模板代码 -->
  </div>
</template>
<script>
import myScript from '@/assets/js/myScript.js' // 引入 JavaScript 文件
export default {
  name: 'MyComponent',
  mounted() {
    myScript() // 调用引入的 JavaScript 文件中的方法
  }
}
</script>
<style scoped>
/* 样式代码 */
</style>