vue3小白入门 - 技术栈

第一步：环境搭建

在开始之前，你需要确保本地安装了 Node.js （建议版本 16.0 或更高）。你可以通过命令行输入 node -v 和 npm -v 来检查是否已安装。

目前，创建 Vue 3 项目最推荐的方式是使用 Vite，因为它基于原生 ES 模块，启动速度极快，热更新体验极佳。

1. 使用 Vite 创建项目 (推荐)

perl 复制代码

bash
深色版本
# 创建项目
npm create vite@latest my-vue-app -- --template vue

# 进入项目目录
cd my-vue-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

说明：my-vue-app 是你的项目名称，可以自定义。执行后，浏览器会自动打开 http://localhost:5173，看到 Vue 的欢迎页面。

2. 使用 Vue CLI (传统方式)

虽然 Vite 更现代，但 Vue CLI 依然强大且稳定，适合需要高度定制化或兼容旧项目的场景。

perl 复制代码

bash
深色版本
# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建项目
vue create my-vue-app

# 启动项目
cd my-vue-app
npm run serve

第二步：理解项目结构

成功创建项目后，你会看到类似如下的目录结构：

csharp 复制代码

深色版本
my-vue-app/
├── node_modules/          # 项目依赖包
├── public/                # 静态资源文件夹
├── src/                   # 源码目录
│   ├── assets/            # 静态资源 (图片, 字体等)
│   ├── components/        # 可复用的组件
│   ├── App.vue            # 根组件
│   └── main.ts            # 应用入口文件
├── index.html             # 页面入口 HTML
├── package.json           # 项目配置和依赖
└── vite.config.ts         # Vite 配置文件

main.ts : 项目的起点。它创建了一个 Vue 应用实例，并将其挂载到 index.html 中的 #app 元素上。
App.vue: 根组件，所有其他组件都将作为其子组件被渲染。

第三步：核心概念与基础语法

1. 响应式数据 (Reactivity)

Vue 3 的核心是响应式系统。使用 ref 和 reactive 可以让数据变得"响应式"，即当数据变化时，视图会自动更新。

xml 复制代码

vue
深色版本
<script setup>
import { ref, reactive } from 'vue'

// ref: 用于基本类型 (字符串, 数字等)
const count = ref(0)

// reactive: 用于对象或数组
const state = reactive({
  name: 'Vue 3',
  version: '3.4'
})

function increment() {
  count.value++ // 注意：ref 需要 .value 访问
}
</script>

<template>
  <div>
    <p>计数: {{ count }}</p>
    <p>框架: {{ state.name }} v{{ state.version }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

2. 模板指令 (Directives)

Vue 提供了一系列指令来操作 DOM。

v-model: 实现表单输入和应用状态之间的双向绑定。
css 复制代码
```
vue
深色版本
<input v-model="message" />
<p>输入内容: {{ message }}</p>
```

v-if / v-show: 条件渲染。

ini 复制代码

vue
深色版本
<p v-if="isVisible">这段文字有条件显示</p>
<p v-show="isVisible">这段文字通过 CSS 显示/隐藏</p>

v-for: 列表渲染。

css 复制代码

vue
深色版本
<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item }}
  </li>
</ul>

v-bind (:) : 动态绑定属性。

ini 复制代码

vue
深色版本
<img :src="imageSrc" :alt="imageName" />

v-on (@) : 绑定事件监听器。

ini 复制代码

vue
深色版本
<button @click="handleClick">点击我</button>

3. 组件 (Components)

组件是 Vue 的基石，允许你将 UI 拆分为独立、可复用的部分。

创建子组件 (MyComponent.vue):

xml 复制代码

vue
深色版本
<template>
  <div class="my-component">
    <h3>{{ title }}</h3>
    <slot></slot> <!-- 插槽，用于接收父组件传递的内容 -->
  </div>
</template>

<script setup>
defineProps({
  title: String
})
</script>

在父组件中使用:

xml 复制代码

vue
深色版本
<template>
  <MyComponent title="我的第一个组件">
    <p>这是插槽中的内容</p>
  </MyComponent>
</template>

<script setup>
import MyComponent from './components/MyComponent.vue'
</script>

4. Composition API (组合式 API)

这是 Vue 3 引入的核心特性，相比 Options API，它提供了更好的逻辑组织和复用能力。上面例子中使用的 <script setup> 语法糖就是 Composition API 的简化写法。

5. 生命周期钩子 (Lifecycle Hooks)

组件在运行过程中会经历不同的阶段（创建、挂载、更新、销毁），你可以通过生命周期钩子函数在特定阶段执行代码。

xml 复制代码

vue
深色版本
<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件已挂载')
})

onUnmounted(() => {
  console.log('组件已卸载')
})
</script>

第四步：进阶功能

1. 路由 (Vue Router)

用于构建单页应用 (SPA)，实现页面间的导航。

css 复制代码

bash
深色版本
npm install vue-router@4

2. 状态管理 (Pinia)

Vue 官方推荐的状态管理库，用于管理跨组件共享的状态。

复制代码

bash
深色版本
npm install pinia