Vue开发 前端入门：npm创建vue项目的详细步骤与常用命令

🔍 关键词：
Vue开发 | 前端入门 | npm创建Vue项目 | 详细步骤 | 常用命令 | Vue CLI | 脚手架 | 组件化 | 单文件组件 | 热重载 | 打包优化

🛠️ npm创建Vue项目详细步骤

1. 环境准备

   

   • 安装Node.js（自带npm）📦
   • 检查版本：node -v / npm -v

2. 全局安装Vue CLI

   npm install -g @vue/cli

   🎯 验证安装：vue --version

   

3. 创建项目

   vue create my-vue-project

   • 选择预设（默认或手动）⚙️
   • 手动配置常用选项：Babel、Router、Vuex、CSS预处理器等

4. 进入项目并启动

   

   cd my-vue-project
   npm run serve

   🚀 开发服务器启动：http://localhost:8080

📜 常用命令速查

💡 核心概念

• 单文件组件（.vue）：模板、脚本、样式一体化 🧩
• 热重载：代码改动实时预览 ⚡
• Vue Router：SPA路由管理 🗺️
• Vuex：状态管理 🏪