一、介绍Vue是一套渐进式 JavaScript 框架核心目标是通过尽可能简单的 API 实现响应式的数据绑定和组合式的视图组件。它的核心特性响应式系统组件化开发轻量且高效使其成为前端开发的主流选择。下面将详细介绍Vue项目的多种创建方式二、Vue项目创建方式提示创建时推荐将目标目录先切换到桌面 or 你存储前端项目的目录这样无需再移动且方便管理和查找(在你的目标文件夹目录上直接输入cmd敲回车即可弹出对应路劲的窗口或者你cmd里用cd命令切换也可以输入cmd覆盖当前路径回车键进入当前文件目录的终端界面开始创建方式1使用 Vue CLI兼容Vue2和Vue31.安装 Node.js 推荐先下载nvm使用nvm进行node版本管理然后通过nvm获取node.js2.安装 Vue CLI支持可视化界面npm install -g vue/cli # 或使用 yarn yarn global add vue/cli3.验证 Vue CLI版本安装好Vue CLI后即可开始创建vue2或vue3项目a.可视化仪表盘启动输入下面命令启动 Vue CLI 可视化仪表盘进行vue项目的创建vue ui然后按以下步骤操作1.在上方导航栏选择 创建选择项目保存路径点击 在此创建新项目2.输入项目名称选择需要使用的包管理器通常使用npm点击 下一步3.选择 手动 配置项目4.勾选所需特性至少勾选 Babel点击 下一步通常选择路由Router其他看需要选择5.在 Vue 版本 选项中选择版本选择代码格式化配置下面这是代码检查代码格式化通常自己开发只需要勾选第一个only选项作用适用场景ESLint with error prevention only只做基础错误检查如语法错误、未定义变量不强制代码风格新手、不想被格式规则约束、只想避免低级错误的场景ESLint Airbnb config业内最严格的代码风格规范Airbnb 团队标准规则非常细致大型团队、追求极致代码规范、开源项目ESLint Standard config宽松一些的社区标准无分号、2 空格缩进等喜欢简洁风格、不想纠结格式细节的开发者ESLint PrettierESLint 负责代码错误检查Prettier 负责自动格式化如缩进、引号、换行最推荐的现代前端组合兼顾代码质量与自动格式化6.点击 创建项目等待创建完成预设看自己的选择想不想保存创建中创建完成b.命令行启动1.输入下方指令创建vue create my-vue2-project2.上下键控制选择选项3.回车选择手动配置上下键移动空格选择注意空格是选择哦回车确定4.选择要创建的vue版本 2或35.选择是否使用history 模式作为路由模式地址栏表现优点缺点Hash 模式选nhttp://xxx.com/#/home无需服务器配置直接可用兼容性好URL 里有#不够美观对 SEO 不太友好History 模式选Yhttp://xxx.com/homeURL 更干净美观对 SEO 更友好生产环境部署时必须配置服务器Nginx/Apache 等做 fallback否则刷新页面会 404新手 / 本地开发 / 快速演示选nHash 模式开箱即用不用管服务器配置开发时更省心。正式项目 / 追求 URL 美观 / 需要 SEO选YHistory 模式但要记住上线时必须让后端 / 运维配置服务器的 fallback 规则把所有路由请求都指向index.html。如果你现在只是学习或本地调试直接输入n回车即可。如果你已经规划好生产环境部署且能配置服务器输入Y回车。6、选择代码检查格式化配置选项作用适用场景ESLint with error prevention only只做基础错误检查如语法错误、未定义变量不强制代码风格新手、不想被格式规则约束、只想避免低级错误的场景ESLint Airbnb config业内最严格的代码风格规范Airbnb 团队标准规则非常细致大型团队、追求极致代码规范、开源项目ESLint Standard config宽松一些的社区标准无分号、2 空格缩进等喜欢简洁风格、不想纠结格式细节的开发者ESLint PrettierESLint 负责代码错误检查Prettier 负责自动格式化如缩进、引号、换行最推荐的现代前端组合兼顾代码质量与自动格式化7.选择代码检查时间和方式Lint on save保存文件时自动执行 ESLint 检查在编辑器里实时提示代码问题方便开发时快速发现错误。Lint and fix on commit提交代码到 Git 前自动执行 ESLint 检查并修复可自动修复的格式问题保证提交代码的规范性。8.选择配置文件存放位置In dedicated config files推荐将 Babel、ESLint 等工具的配置分别存放在独立的文件中如.babelrc、.eslintrc.js。In package.json将所有配置都写在package.json文件里集中管理。推荐选择优先选In dedicated config files配置文件职责单一便于维护和复用不同工具的配置互不干扰可读性更强符合前端工程化的最佳实践适合长期维护的项目仅在小型 Demo / 临时项目可选In package.json项目结构更简洁少创建几个文件但配置混杂在一起后期维护麻烦不推荐正式项目使用9.是否保存当前配置为预设y将你刚才选择的所有配置Vue 版本、路由模式、Linter 规则等保存为一个自定义预设下次创建项目时可以直接选择无需重复配置。N默认你已输入n不保存当前配置本次创建完成后下次创建项目需要重新手动选择所有选项。10. 项目创建成功方式2使用 ViteVue3项目前提Node.js ≥ 14.18.0 或 ≥ 16.0.01.执行下面的其中一条命令创建 Vue3 项目一般不写--template vue手动配置即可 npm create vitelatest 项目名称 # npm 6.x npm create vitelatest 项目名称 --template vue # npm 7 npm create vitelatest 项目名称 -- --template vue # yarn yarn create vite 项目名称 --template vue # pnpm pnpm create vite 项目名称 --template vue--template vue是指定创建项目时使用的模板类型这里表示使用 Vue 官方提供的基础 Vue 模板。具体来说template是create vite命令的参数用于指定项目模板vue是模板名称代表这是一个基于 Vue 的基础项目模板使用这个模板创建的项目会包含最基础的 Vue 项目结构已配置好的 Vue 单文件组件 (SFC) 支持与 Vite 集成的开发环境配置基本的构建和开发命令除了vue模板Vite 还提供其他相关模板vue-ts带 TypeScript 支持的 Vue 模板vue-jsx带 JSX 支持的 Vue 模板vue-ts-jsx带 TypeScript 和 JSX 支持的 Vue 模板选择不同的模板会自动配置相应的开发环境省去手动配置的步骤。这里我没有选择模板2.然后上下键移动选择Vue接下来按照提示操作即可与第一种方式类似方式3使用 create-vue官方推荐创建项目# npm npm create vuelatest # yarn yarn create vue # pnpm pnpm create vuecreate-vue3.18.0要求 Node.js 版本至少为^20.19.0或22.12.0按交互提示配置输入项目名称选择是否添加 TypeScript、JSX 支持选择是否安装 Vue Router、Pinia 等工具最终效果拖进VS Code里:-- 按Ctrl调出终端控制台输入npm install安装所需依赖然后通过NPM脚本 点击运行 或者 npm run dev版本查看方式查看 Node 版本node -v查看 npm 版本npm -v查看 Vue CLI 版本vue --version