Javascript 将js文件全局导入vuejs 3

您好，我正在尝试将jQuery和THREEJS导入到我的Vue.js cli中，但找不到全局导入它们的方法

当我尝试将它们导入到.vue文件（如

home.vue

）时，会出现此错误

“导入”和“导出”只能出现在顶层（5:4）

因此，我尝试使用

window将它们导入main.js。$=window.jQuery=require（'jQuery'）

但是我得到了下面的错误

未定义“$”

三个也一样

我在网上查过，但大多数答案都是关于VueJS2的

编辑： 这是我在

Home.vue中的脚本

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(200, 200);
$('.icon').append(renderer.domElement);

var geometry = new THREE.IcosahedronBufferGeometry();
var edges = new THREE.EdgesGeometry(geometry);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}));
scene.add(line);

camera.position.z = 2.5;

var animate = function () {
  requestAnimationFrame(animate);

  line.rotation.x += 0.0025;
  line.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();

这就是我试图调用gloabally THREE和jQuery的地方：

import { createApp } from 'vue'
import App from './App.vue'
import Loading from './Loading.vue'
import router from './router'

window.$ = require('jquery')
window.JQuery = require('jquery')

window.THREE = require('three')


createApp(App).use(router).mount('#app')
createApp(Loading).mount('#loading')

和package.json

{
  "name": "portfolio-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-nprogress": "^0.2.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.9",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2"
  }
}

不要试图在全局范围内定义它们，只要在想要使用它们时需要它们，在
Home.vue
中，您应该有如下内容：


const $ = require('jquery')
const THREE = require('three')

export default{
name:'Home',
...

mounted(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(200, 200);
$('.icon').append(renderer.domElement);

var geometry = new THREE.IcosahedronBufferGeometry();
var edges = new THREE.EdgesGeometry(geometry);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}));
scene.add(line);

camera.position.z = 2.5;

var animate = function () {
  requestAnimationFrame(animate);

  line.rotation.x += 0.0025;
  line.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();
}

}
}


请分享整个代码和软件包。jsonDone，我编辑了帖子，效果很好，谢谢！我是VueJS新手导入globaly是一个坏习惯吗？不客气，这不是一个坏习惯，但如果在某些组件中需要它，只需要在该组件中使用它