vscode vue3配置

### 如何在VSCode中配置Vue 3项目

为了成功设置并运行基于Vite构建工具的Vue 3项目，在VSCode环境中开发，需遵循一系列特定操作来确保最佳体验和效率。

#### 安装必要的扩展
安装一些有助于提高生产力的VSCode插件对于优化工作流程至关重要。推荐安装如下几个扩展：

- Volar：专为Vue 3设计的语言支持服务，提供语法高亮、自动补全等功能[^1]。
- ESLint：用于代码风格检查以及潜在错误检测，保持代码质量的一致性和可靠性。
- Prettier – Code formatter：统一团队成员之间的编码格式标准，减少不必要的争论。

#### 初始化项目结构
通过命令行工具创建一个新的Vue 3应用程序实例之后，应当调整`package.json`文件内的脚本部分以便更好地适应日常开发需求。例如，可以添加启动服务器、编译TypeScript源码等常用指令[^2]。

{
  "scripts": {
    "serve": "vite",
    "build": "vue-tsc --noEmit && vite build"
  }
}

#### 设置编辑器选项
为了让VSCode能够理解并处理现代JavaScript/TypeScript特性，建议修改`.vscode/settings.json`文件加入以下配置项：

{
  "typescript.tsdk": "./node_modules/typescript/lib", // 指定本地Typescript版本路径
  "editor.codeActionsOnSave": {                        // 自动修复ESLint问题
    "source.fixAll.eslint": true
  },
  "[javascript],[typescript],[vue]": {                 // 对指定语言应用Prettier格式化程序
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

#### 整合状态管理库Vuex与路由导航组件Vue Router
按照官方文档指导引入这两个核心模块至项目之中，并完成相应初始化过程。注意这里采用的是适用于Vue Composition API的新版API形式。

// src/store/index.ts
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {};
  },
});

export default store;

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

最后一步是在入口文件(main.ts)里注册上述定义好的全局对象[^3]。

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';       // 导入状态仓库
import router from './router';     // 导入路由器实例

createApp(App).use(store).use(router).mount('#app');

以上就是完整的在VSCode环境下配置Vue 3项目的步骤说明。