Vue3：全流程开发

文章目录

- - 环境准备与安装
  - [创建 Vue 3 项目](#创建 Vue 3 项目)
  - 项目结构解析
  - [Vue 3 核心语法](#Vue 3 核心语法)
  - 常用指令
  - 开发调试工具
  - 构建与部署

环境准备与安装

在开始之前，请确保本地已安装 Node.js（建议版本 16+）和 npm（Node 包管理器）。可通过终端命令检查版本：

bash 复制代码

node -v
npm -v

创建 Vue 3 项目

使用 Vue 官方脚手架工具 create-vue（推荐）或 Vue CLI 创建项目。

方法一：使用 create-vue（官方推荐）

bash 复制代码

!进入目标项目文件夹
npm create vue@3  !这里@后填具体版本号

执行后会提示选择功能（如 TypeScript、JSX、Pinia 等），按需选择后进入项目目录并安装依赖：

bash 复制代码

cd <项目名称>
npm install
npm run dev

方法二：使用 Vue CLI

bash 复制代码

npm install -g @vue/cli
vue create my-vue3-project
cd my-vue3-project
npm run serve

端口5173能访问到即启动成功

项目结构解析

创建成功后，核心目录结构如下：

src/：源码目录
src/main.js：入口文件
src/App.vue：根组件
public/：静态资源
index.html：入口 HTML

Vue 3 核心语法

1. 创建应用实例

在 main.js 中：

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

2. 组合式 API（Composition API）

Vue 3 推荐使用 <script setup> 语法糖简化代码。

示例：响应式数据与方法

xml 复制代码

<!-- Counter.vue -->
<script setup>
import { ref, computed } from 'vue'

// 响应式变量
const count = ref(0)

// 方法
const increment = () => {
  count.value++
}

// 计算属性
const doubleCount = computed(() => count.value * 2)
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

3. 响应式原理

ref()：用于基本类型（string、number），需通过 .value 访问
reactive()：用于对象或数组

javascript 复制代码

import { reactive } from 'vue'

const state = reactive({
  name: 'Vue',
  version: 3
})

4. 生命周期钩子

javascript 复制代码

import { onMounted, onUnmounted } from 'vue'

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

onUnmounted(() => {
  console.log('组件卸载')
})

5. 组件通信

父传子：props
子传父：emit
兄弟/跨层级：provide/inject 或状态管理（如 Pinia）

父组件传值

xml 复制代码

<!-- Parent.vue -->
<script setup>
import Child from './Child.vue'
const msg = 'Hello from parent'
</script>

<template>
  <Child :message="msg" />
</template>

子组件接收

xml 复制代码

<!-- Child.vue -->
<script setup>
defineProps({
  message: String
})
</script>

<template>
  <p>{{ message }}</p>
</template>

6. 路由（Vue Router）

安装：

bash 复制代码

npm install vue-router

配置路由：

javascript 复制代码

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../views/About.vue') }
]

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

export default router

在 main.js 中使用：

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

7. 状态管理（Pinia）

安装：

bash 复制代码

npm install pinia

创建 store：

javascript 复制代码

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在组件中使用：

xml 复制代码

<script setup>
import { useCounterStore } from '../stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }}</p>
  <button @click="counter.increment">+1</button>
</template>

常用指令

v-model：双向绑定
v-if / v-show：条件渲染
v-for：列表渲染
@click：事件监听（v-on 的简写）
:src：属性绑定（v-bind 的简写）

开发调试工具

安装 Vue DevTools 浏览器插件，可调试组件结构、状态、事件等。

构建与部署

构建生产版本：

bash 复制代码

npm run build

生成的静态文件在 dist/ 目录，可部署到 Nginx、Vercel、Netlify 等平台。