vue.js开发环境搭建有三种主流方式：一、推荐使用vite快速初始化现代项目；二、选用vue cli创建兼容vue 2/3的标准项目；三、通过cdn手动引入实现最小依赖运行。
如果您准备开始 Vue.js 开发，但尚未配置本地开发环境，则可能是由于缺少 Node.js 运行时、包管理工具或项目脚手架。以下是完成 Vue.js 开发环境搭建与项目初始化的多种可行路径：
一、使用 Vite 快速初始化（推荐现代项目）
Vite 是由 Vue 作者尤雨溪开发的新型构建工具，具备极快的冷启动和热更新速度，无需配置即可支持 Vue 3 和 TypeScript。它依赖于浏览器原生 ES 模块能力，适合新项目快速上手。
1、在终端中执行命令创建项目，将 my-vue-app 替换为您的项目名称：
npm create vite@latest my-vue-app -- --template vue
2、进入项目目录：
cd my-vue-app
3、安装依赖：
npm install
4、启动开发服务器：
npm run dev
5、在浏览器中访问 http://localhost:5173 查看初始页面。
二、使用 Vue CLI 创建标准项目（兼容 Vue 2/3）
Vue CLI 是官方长期维护的成熟脚手架，提供交互式配置、插件系统及丰富的内置功能（如 ESLint、Router、Pinia 集成），适用于需要定制化构建流程或需长期维护的项目。
1、全局安装 Vue CLI：
npm install -g @vue/cli
2、验证安装是否成功：
vue --version
3、创建新项目：
vue create my-vue-project
4、在交互式菜单中选择：Manually select features 以按需启用 Router、Vuex/Pinia、CSS 预处理器等选项；若为 Vue 2 项目，请在提示中选择 2.x 版本分支。
5、进入项目并启动服务：
cd my-vue-project
npm run serve
6、默认访问地址为 http://localhost:8080。
三、手动配置基础环境（最小依赖方式）
该方式跳过脚手架，直接引入 Vue 运行时，适用于学习原理、嵌入式场景或轻量级页面集成。不包含构建步骤，仅需 HTML + CDN 引入即可运行。
1、新建一个 index.html 文件，内容如下：
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script></script>
const { createApp } = Vue;
createApp({
data() {
return { message: 'Hello from Vue!' }
}
}).mount('#app');
2、用浏览器直接打开该 HTML 文件即可渲染响应式内容。
四、配置国内镜像加速依赖安装
npm 默认源位于海外，易出现超时或下载失败。切换为国内镜像可显著提升依赖安装成功率与速度，尤其在首次初始化项目时至关重要。
1、设置 npm 镜像为 https://registry.npmmirror.com：
npm config set registry https://registry.npmmirror.com
2、验证当前配置：
npm config get registry
3、如需临时使用镜像安装单个包，可在命令后添加 --registry https://registry.npmmirror.com 参数。
五、安装必要开发工具与插件
高效开发依赖于合适的编辑器支持，VS Code 是目前最主流的选择。正确配置插件可实现语法高亮、自动补全、组件预览及调试能力。
1、安装 VS Code 编辑器（官网下载并完成安装）。
2、安装以下核心扩展：
— Volar：Vue 3 官方推荐语言支持插件，替代已废弃的 Vetur。
— ESLint：实时检查代码规范与潜在错误。
— Prettier：统一代码格式，避免风格争议。
3、在 VS Code 设置中启用 Format on Save 并将默认格式化工具设为 Prettier。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
