VS Code开发Vue3项目指南（vue开发工具 vscode）
使用 VS Code 开发 Vue 3 项目指南
环境准备
- 安装 Node.js (建议 LTS 版本)
O Node.js 官网下载
O 安装后验证: node -v 和 npm -v
- 安装 VS Code
O VS Code 官网下载
- Vue CLI 或 Vite
O Vue CLI: npm install -g @vue/cli
O Vite: npm create vite@latest
推荐 VS Code 扩展
- Volar - Vue 3 官方推荐的语言支持插件
- Vue VSCode Snippets - Vue 代码片段
- ESLint - 代码质量检查
- Prettier - 代码格式化
- TypeScript Vue Plugin (如果使用 TypeScript)
- Path IntelliSense - 路径自动补全
- Auto Close Tag - 自动闭合标签
- Auto Rename Tag - 自动重命名标签
项目设置
使用 Vite 创建 Vue 3 项目
bash
npm create vite@latest my-vue-app --template vue
# 或使用 TypeScript
npm create vite@latest my-vue-app --template vue-ts
使用 Vue CLI 创建项目
bash
vue create my-vue-app
# 选择 Vue 3 预设
配置建议
jsconfig.json / tsconfig.json
json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
},
"types": ["vite/client"]
},
"exclude": ["node_modules"]
}
.eslintrc.js 示例
javascript
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/multi-word-component-names': 'off',
},
}
开发技巧
- 组件自动导入 (使用 unplugin-vue-components)
O 安装: npm i unplugin-vue-components -D
O 在 vite.config.js 中配置:
javascript
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({
dts: true, // 生成类型声明文件
}),
],
})
- 组合式 API 代码组织
O 使用 <script setup> 语法
O 将相关逻辑组织到自定义 composable 函数中
- 调试技巧
O 使用 Chrome 的 Vue Devtools 扩展
O 在 VS Code 中使用调试配置
调试配置
在 .vscode/launch.json 中添加:
json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
性能优化
- 使用 vite 的按需编译特性
- 组件懒加载: defineAsyncComponent
- 使用 v-memo 指令优化渲染性能
- 合理使用 provide/inject 避免 prop 逐层传递
常用快捷键
- 格式化文档: Shift + Alt + F
- 快速打开文件: Ctrl + P
- 转到定义: F12
- 查看引用: Shift + F12
- 重命名符号: F2
- 触发建议: Ctrl + Space
希望这些信息能帮助您高效地使用 VS Code 开发 Vue 3 项目！