vscode代码自动补全问题

Question

vscode扩展装的volar，vue3 support，我通过npm安装vue的一些插件，然后在vue文件中import，在使用时没有代码提示。以threejs为例，import后无法通过new THREE.的方式获取threejs的API，必须对着文档手动敲，我想知道这是特性还是缺了配置或插件？

<template>
  <!-- <HelloWorld msg="You did it!" /> -->
  <div ref="webgl" class="content"></div>
</template>

<script setup lang="ts">
  import { onMounted, onUpdated, ref } from "vue";
  import HelloWorld from "./components/HelloWorld.vue";
  import * as THREE from "three";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
//引入性能监视器stats.js
  import Stats from 'three/addons/libs/stats.module.js';

  const camera = new THREE.PerspectiveCamera(
    90,
    window.innerWidth / window.innerHeight,
    0.01,
    1000
  );
  camera.position.z = 1;

  const scene = new THREE.Scene();
  const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
  const attribue = new THREE.BufferAttribute(vertices, 3);
  const geometry = new THREE.BufferGeometry();
  geometry.attributes.position = attribue;
  const material =  new THREE.LineBasicMaterial({
    color: 0xffff00,
    size: 10.0 //点对象像素尺寸
}); 
  const mesh = new THREE.LineSegments(geometry, material);
  scene.add(mesh);
  camera.lookAt(mesh)
  const render = new THREE.WebGLRenderer({ antialias: true });
  render.setSize(800, 600);
  render.render(scene, camera);
  render.setAnimationLoop();
  const directionalLight = new THREE.DirectionalLight(0xffefff, 1);
  // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
  directionalLight.position.set(80, 100, 50);
  // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
  directionalLight.target = mesh;
  scene.add(directionalLight);
  const ambient = new THREE.AmbientLight(0xffffcb, 0.4);
scene.add(ambient);
  const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5, 0xffffe);
  scene.add(dirLightHelper);
  const controls = new OrbitControls(camera, render.domElement);
  const stats = new Stats();
  stats.setMode(1)
  // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
  controls.addEventListener("change", () => {
    render.render(scene, camera); //执行渲染操作
  }); //监听鼠标、键盘事件
  let webgl = ref();
  onMounted(() => {
    console.log(webgl.value);
    controls.enableDamping = true;
    // document.body.appendChild(render.domElement)
    webgl.value.appendChild(render.domElement);
    webgl.value.appendChild(stats.domElement);
    rendered();
  });
  const rendered = () => {
    // mesh.rotation.y += 0.01;
    render.render(scene, camera);
    stats.update();
    requestAnimationFrame(rendered);
  };
</script>

<style>
  .content {
    margin: 50px 50px;
  }
</style>

Answer 1

• 这篇博客: 基于vscode的vue开发中的 3 直接Import组件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

•   我们继续，鉴于我是想要写一个个人网站，现在我假设想要添加五个页面：主页，博客目录页，项目展示页，用户注册登录页，简历页，关于页。

  虽然只有六个页面，但是要想做好，要想的东西挺多的，因为vue不像是php，不能写了一半页面了，才开始想下一半页面该怎么做，而是一开始就要想清楚，每一个页面的架构是怎样的，甚至于，每一个图表，每一个按钮最终会放在哪一个组件中？用写文章来类比，原本用php写网页，就像是写流水账一样，写到中间下半部再怎么设计结尾都可以。但是用vue，就必须要先规定死，这篇文章，开头是哪一个组件？中间是哪一个组件？结尾是哪一个组件？某一些更细的组件(例如一列排比句)应该放在中间组件的哪一个部位等等。在这里写文档，我就先不这么认认真真地设计思考了，先尽快搭出框架来。

• 以下回答由chatgpt基于相关博客总结生成:

  问题回答:

  根据提供的参考资料和问题描述，问题出现的原因可能有以下几种情况：

  1. 插件没有正确安装或启动：首先确认已安装了VScode和Node.js，并且插件已经正确安装和启动。可以参考段落2和段落6中提供的下载地址进行安装。

  2. 插件不支持对应的功能或版本：确认使用的插件是针对Vue 3的支持，并且能够提供自动补全的功能。如果插件不支持某些功能或版本，可能需要寻找其他插件或进行插件的配置调整。

  3. 缺少必要的配置或设置：在VScode中，有时需要手动配置或设置一些选项才能启用自动补全功能。可以查看插件的文档或设置，了解是否需要进行相关配置，并进行相应的设置。

  针对具体的插件和问题，请提供更详细的信息，以便给出更具体的解决方案。

  这是目前能给出的初步解答，请提供更多信息以便进一步帮助。