文章目录1 Vue 3.0项目的创建1.1 Node.js 安装1.2 Vue-cli 安装1.3 创建Vue 3.0项目1.4 VSCode安装1.5 使用VSCode运行项目1 Vue 3.0项目的创建1.1 Node.js 安装创建Vue 3.0项目需要用到npm包管理器而npm包管理器是Node.js软件的DOS命令所以必须首先安装Node.js。下载地址https://nodejs.org/zh-cn/download安装完成后cmd命令node -v查看版本1.2 Vue-cli 安装搭建Vue 3.0项目必须依赖Vue-cli 3.0或以上版本可通过Vue -v查看版本。1若安装过Vue 2.0需要先卸载命令为npm uninstall vue-cli -g2若没安装过Vue 2.0可直接执行安装命令npm install -g vue/cli3查看版本Vue -v1.3 创建Vue 3.0项目1新建一个存放项目的文件夹例如example进入该文件夹并在该文件夹下执行以下的cmd命令。2vue create first1.0first1.0是项目名称回车后会提示用户是否用更快的链接地址生成Vue 3.0项目选择y。3询问用户选择是以什么模板方式进行安装选择Manually select features手动创建项目。4Vue-cli将提供以下特性可做如下选择√Choose Vue version√BabelTypeScriptProgressive Web App PWASupport√Router√Vuex√CSS Pre-processors√Linter/FormatterUnit TestingE2E Testing5提示用户有Vue 2.x、Vue 3.x两种项目类型此处选择Vue 3.x。6询问是否使用history路由模式选择n。7选择CSS预处理器可选择Sass/SCSS(with dart-sass)。8选择代码格式化检测工具ESLintStandard config。9选择代码检查方式Lint on save。10设置Babel、PostCSS、ESLint等配置文件如何存放选择In package.json。11询问是否保存当前配置以供后期项目快速构建选择n。12配置完成开始生成成功后会出现项目运行命令。13进入项目目录cd first1.0启动项目npm run serve。14在浏览器输入http://loclahost:8080可访问项目主页。1.4 VSCode安装1官网下载https://code.visualstudio.com/安装包2安装好后继续安装插件1 Vue (Official) 作用Vue 3 的官方语言支持插件提供语法高亮、类型检查、智能提示完美支持script setup和 TypeScript。❗️ 注意如果你之前安装过 VeturVue 2 时代的插件请务必先卸载两者会冲突。Vue 3 项目请认准 Vue - Official。2 Vue 3 Snippets: 作用代码片段神器输入简写即可快速生成 Vue 3 模板。例如v3setup → 生成完整的script setup组件结构v3ref → 快速创建 ref 响应式数据v3onMounted → 生成 onMounted 生命周期告别手写重复代码极大提升组件编写速度。3 Auto Import: 作用自动查找并补全 import 语句。当你使用 ref、computed 或者自定义组件时它会自动帮你导入对应的模块还能移除未使用的导入保持代码整洁。4 Path Intellisense: 作用智能路径补全输入 ./ 或 / 时自动提示文件路径避免手写出错。⚙️ 关键配置为了让 别名通常指向 src 目录也能补全请在 VSCode 设置settings.json中加入{path-intellisense.mappings:{:${workspaceFolder}/src}}5 Prettier - Code formatter:作用统一的代码格式化工具支持 JavaScript、Vue、CSS 等。建议开启“保存时自动格式化”让代码风格始终一致。⚙️ 推荐配置同样放入 settings.json{editor.formatOnSave:true,editor.defaultFormatter:esbenp.prettier-vscode,prettier.singleQuote:true,// 使用单引号prettier.semi:false// 语句末尾不加分号}6 Error Lens 作用将代码错误和警告直接显示在行内一眼就能看到问题所在不用再把鼠标悬停在波浪线上。调试时非常直观。7 ESLint 作用实时检测 JavaScript / TypeScript / Vue 代码中的语法错误和风格问题强制执行团队规范。配合 Vue 官方的 eslint-plugin-vue还能检查 Vue 模板中的常见陷阱如 v-for 缺少 key。8Material Icon Theme 作用为不同类型的文件显示精美的图标让你在文件树中快速定位 Vue、JS、CSS 等文件。颜值即生产力9 Vue Peek 作用在模板中按住 Ctrl 并点击组件名直接跳转到该组件的定义文件。对于组件嵌套深的大型项目这个功能能节省大量查找时间。10 别名路径跳转 作用专门解决 /components/xxx 这种别名路径无法 Ctrl点击 跳转的问题。安装后配合 jsconfig.json 或 tsconfig.json 中的路径配置即可实现智能跳转。1.5 使用VSCode运行项目1打开项目文件夹2CtrlShiftY打开Terminal终端3执行启动命令npm run serve遇到的问题npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称解决方案以管理员身份运行VSCodenpm : 无法加载文件 D:\nodeJS\npm.ps1因为在此系统上禁止运行脚本。解决方案powershell 执行Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned