Vue 全局和局部引入 JS 文件的最佳实践

通过在 Vue 的入口文件 (main.js) 中使用 import 语句全局引入所需的 JS 文件，例如：

// main.js
import Vue from 'vue'
import App from './App.vue'
import './common.js' // 全局引入 common.js 文件

new Vue({
  render: h => h(App),
}).$mount('#app')

然后，在组件中可以使用 import 语句局部引用该 JS 文件，例如：

// MyComponent.vue
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
import { getData } from './common.js' // 局部引入 common.js 文件中的 getData 函数

export default {
  name: 'MyComponent',
  data() {
    return {
      title: ''
    }
  },
  mounted() {
    this.title = getData()
  }
}
</script>

这样，就可以在全局和局部分别引入 JS 文件了。