Vue 3 快速入门指南

一、环境准备

1.1 安装 Node.js

下载最新版 Node.js（18.3 或更高）
验证安装：
node -v
npm -v

1.2 推荐开发工具

VS Code + Vue 官方扩展
Chrome + Vue DevTools 扩展

二、创建第一个 Vue 应用

2.1 使用官方脚手架

npm create vue@latest

2.2 项目配置选项

✔ Project name: vue-demo
✔ Add TypeScript? No
✔ Add JSX Support? No 
✔ Add Vue Router? Yes
✔ Add Pinia? Yes
✔ Add Vitest? No
✔ Add ESLint? Yes
✔ Add Prettier? Yes

2.3 初始化项目

cd vue-demo
npm install
npm run dev

三、项目结构解析

├── src/
│   ├── assets/       # 静态资源
│   ├── components/   # 组件
│   ├── router/       # 路由配置
│   ├── views/        # 页面视图
│   └── main.js       # 入口文件
├── package.json
└── vite.config.js    # 构建配置

四、基础语法示例

4.1 组合式 API

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

4.2 选项式 API

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

五、通过 CDN 使用 Vue

5.1 全局构建版本

<div id="app">{{ message }}</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref } = Vue
  
  createApp({
    setup() {
      return {
        message: ref('Hello Vue!')
      }
    }
  }).mount('#app')
</script>

5.2 ES 模块构建

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      return {
        message: ref('Hello Vue!')
      }
    }
  }).mount('#app')
</script>

六、常用工具链

工具	作用
Vite	极速构建工具
Vue Router	路由管理
Pinia	状态管理
Vue DevTools	浏览器调试工具
ESLint	代码质量检查

七、项目构建与部署

7.1 开发模式

npm run dev

7.2 生产构建

npm run build

7.3 本地预览

npm run preview

八、学习资源推荐

提示：建议从组合式 API 开始学习，这是 Vue 3 推荐的使用方式。遇到问题时，优先查看控制台错误信息和 Vue DevTools 的状态跟踪。