方式一：使用 Vite（推荐，Vue 3 官方推荐）
1. 环境准备
bash
# 安装 Node.js（版本 18+ 或 20+）
# 下载地址：https://nodejs.org/
# 检查 Node.js 和 npm 版本
node -v
npm -v2. 创建 Vue 项目
bash
# 使用官方脚手架
npm create vue@latest
# 或直接指定项目名
npm create vue@latest my-vue-app3. 项目配置选项
创建过程中，您可以选择：
-
✅ TypeScript
-
✅ JSX 支持
-
✅ Vue Router（路由）
-
✅ Pinia（状态管理）
-
✅ ESLint（代码检查）
-
✅ Prettier（代码格式化）
4. 安装依赖并运行
bash
# 进入项目目录
cd my-vue-app
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 访问：http://localhost:5173方式二：使用 Vue CLI（传统方式）
1. 安装 Vue CLI
bash
# 全局安装（如果已安装可跳过）
npm install -g @vue/cli
# 或
yarn global add @vue/cli
# 检查版本
vue --version2. 创建项目
bash
# 创建新项目
vue create my-vue-app
# 或使用图形界面
vue ui3. 选择预设
-
Default (Vue 3) - Vue 3 默认配置
-
Default (Vue 2) - Vue 2 默认配置
-
Manually select features - 手动选择功能
4. 安装和运行
bash
cd my-vue-app
npm run serve
# 访问：http://localhost:8080方式三：Vite 快速创建（最简方式）
bash
# 快速创建 Vue 3 项目
npm create vite@latest my-app -- --template vue
# 或创建 Vue + TypeScript 项目
npm create vite@latest my-app -- --template vue-ts
# 进入目录并运行
cd my-app
npm install
npm run dev项目结构说明
text
my-vue-app/
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ ├── components/ # 组件
│ ├── views/ # 页面组件（如果使用路由）
│ ├── router/ # 路由配置
│ ├── stores/ # 状态管理
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── public/ # 公共资源
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── README.md常用开发工具配置
1. VS Code 插件推荐
-
Volar - Vue 官方推荐的 Vue 3 语言工具
-
Vue VSCode Snippets - Vue 代码片段
-
ESLint - 代码检查
-
Prettier - 代码格式化
-
Auto Rename Tag - 自动重命名标签
-
Path Intellisense - 路径智能提示
2. 浏览器插件
-
Vue Devtools - Vue 开发者工具
常用命令
bash
# 开发环境
npm run dev # 启动开发服务器
npm run serve # Vue CLI 项目
# 生产构建
npm run build # 构建生产版本
# 代码检查
npm run lint # 检查代码规范
npm run format # 格式化代码
# 预览生产版本
npm run preview # Vite 项目预览配置文件示例
vite.config.js 基础配置
javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 3000, // 自定义端口
open: true, // 自动打开浏览器
},
resolve: {
alias: {
'@': '/src' // 路径别名
}
}
})常见问题解决
1. 端口占用
bash
# 修改端口启动
npm run dev -- --port 30012. 安装依赖慢
bash
# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com
# 或使用 yarn
npm install -g yarn
yarn install3. 清除 npm 缓存
bash
npm cache clean --force快速开始模板
bash
# 一键创建 Vue 3 + TypeScript + Pinia + Router 项目
npm create vue@latest my-app -- --typescript --router --pinia --eslint学习资源
推荐使用 Vite + Vue 3 的组合，这是目前最快速、最现代的开发方式。