
## 1. 环境准备

### 1.1 安装Node.js
- 访问 [Node.js官网](https://nodejs.org/) 下载LTS版本
- 验证安装：
```bash
node --version
npm --version
```

### 1.2 安装Vue CLI（可选，推荐使用Vite）
```bash
npm install -g @vue/cli
# 或
yarn global add @vue/cli
```

## 2. 使用Vite创建Vue项目（推荐方式）

### 2.1 创建项目
```bash
# 使用npm
npm create vue@latest

# 或使用yarn
yarn create vue

# 或使用pnpm
pnpm create vue
```

### 2.2 交互式配置
执行命令后，你会看到以下选项：
```
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
```

### 2.3 进入项目并运行
```bash
cd <project-name>
npm install
npm run dev
```

## 3. 使用Vue CLI创建项目（传统方式）

### 3.1 创建项目
```bash
vue create my-project
```

### 3.2 选择预设
```
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
❯ Manually select features
```

### 3.3 选择功能
```
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
```

## 4. 项目结构说明

使用Vite创建的典型项目结构：
```
my-vue-project/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── router/
│   │   └── index.js
│   ├── stores/
│   │   └── counter.js
│   ├── views/
│   │   ├── AboutView.vue
│   │   └── HomeView.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js
```

## 5. 基础配置示例

### 5.1 修改vite.config.js
```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  server: {
    port: 3000,
    open: true
  }
})
```

### 5.2 配置ESLint + Prettier
`.eslintrc.cjs`:
```javascript
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-prettier'
  ],
  rules: {
    'vue/multi-word-component-names': 'off'
  }
}
```

`.prettierrc`:
```json
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "none",
  "tabWidth": 2
}
```

## 6. 安装常用依赖

```bash
# 状态管理
npm install pinia

# UI框架（按需选择）
npm install element-plus
# 或
npm install ant-design-vue
# 或
npm install vuetify

# HTTP客户端
npm install axios

# 路由
npm install vue-router@4

# 日期处理
npm install dayjs

# 工具函数
npm install lodash-es
```

## 7. 创建第一个组件

`src/components/HelloWorld.vue`:
```vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="count++">Count is: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String
})

const count = ref(0)
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 50px;
}
</style>
```

## 8. 配置路由

`src/router/index.js`:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
```

## 9. 启动和构建

```bash
# 开发模式
npm run dev

# 生产构建
npm run build

# 预览生产构建
npm run preview

# 代码检查
npm run lint
```

## 10. 最佳实践建议

### 10.1 项目组织
```
src/
├── api/          # API接口
├── assets/       # 静态资源
├── components/   # 公共组件
├── composables/  # 组合式函数
├── directives/   # 自定义指令
├── router/       # 路由配置
├── stores/       # 状态管理
├── styles/       # 全局样式
├── utils/        # 工具函数
└── views/        # 页面组件
```

### 10.2 Git提交规范
```bash
# 安装commitlint
npm install @commitlint/config-conventional @commitlint/cli -D

# 创建.commitlintrc.js
echo "module.exports = { extends: ['@commitlint/config-conventional'] }" > .commitlintrc.js
```

### 10.3 环境变量配置
创建`.env`文件：
```env
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=My Vue App
```

## 常见问题

### Q: 安装缓慢？
- 使用淘宝镜像：`npm config set registry https://registry.npmmirror.com`
- 使用pnpm：`npm install -g pnpm`

### Q: 端口被占用？
```javascript
// vite.config.js
server: {
  port: 3000 // 修改端口号
}
```

### Q: 需要支持旧浏览器？
```javascript
// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}
```
