在 vue3-cli 项目中导入模块

【问题标题】：importing modules in vue3-cli projects在 vue3-cli 项目中导入模块
【发布时间】：2021-08-14 22:28:19
【问题描述】：

我一直在尝试简单地加载诸如 Jquery 和 @tensorflow/tfjs 之类的模块，但我无法使其工作。我已经使用 npm 安装了它们。

我已经创建了 @vue3/cli 项目并且一切正常，直到我尝试导入这两个模块。

我的main.js文件是这样的-

import {
    Vue
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/index.css'
import $ from 'jquery'
import tf from '@tensorflow/tfjs'

Vue.config.productionTip = false

Vue(App).use(store).use(router).use(tf).use($).mount('#app')

我知道我可以在每个组件/视图中简单地导入 JQuery，但对我来说，这看起来太笨拙了。

如何在 main.js 文件中导入这些模块并在任何我想要的地方使用它？

【问题讨论】：

标签： jquery vue.js ecmascript-6 tensorflow.js

【解决方案1】：

对于 Vue 3，导入应该是：

import { createApp } from 'vue'

createApp(App).use(/*...*/).mount('#app')

Vue.config.productionTip 是 removed in Vue 3。

而且$ 和tf 不是Vue 插件，因此它们不能与.use() 一起使用。如果您希望它们成为全局属性，请使用app.config.globalProperties：

const app = createApp(App)
app.config.globalProperties.$ = $
app.config.globalProperties.tf = tf
app.mount('#app')

然后在你的组件代码中：

export default {
  mounted() {
    console.log(this.$) // jQuery
    console.log(this.tf) // TensorFlow
  }
}

【讨论】：