首页 › Vue › Vue 基础 › Vue 概述与开发环境

Vue 是什么

Vue（读作 /vjuː/，与 view 同音）是一款用于构建用户界面的渐进式框架。与 React 和 Angular 并称前端三大框架。

渐进式

这意味着你可以按需使用 Vue 的能力：

• 只想给老页面加个计数器？直接 CDN 引入一个 .js 文件即可
• 要构建完整 SPA？用 Vite + Vue Router + Pinia

Vue 2 vs Vue 3

对比维度	Vue 2	Vue 3
响应式	Object.defineProperty	Proxy（支持数组索引、属性增删）
API 风格	Options API（data/methods/computed）	Options API + Composition API（setup/ref/reactive）
TypeScript	需要 vue-class-component 支持	原生 TS 支持
包体积	~30KB (gzip)	~22KB (gzip，Tree-shaking)
性能	基准	提升约 1.3~2 倍
长期支持	2023-12-31 已停止维护	✅ 当前主力版本

建议：新项目直接用 Vue 3。维护中的 Vue 2 项目了解迁移要点即可。

开发环境搭建

方式一：CDN 起步（零配置）

适合学习阶段、往老项目加功能：

<!DOCTYPE html>
<html>
<head>
  <title>Vue 速览</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>

  <!-- 生产版本会自动关闭 DevTools 提示 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return { message: 'Hello Vue!' };
      }
    }).mount('#app');
  </script>
</body>
</html>

方式二：Vite 脚手架（推荐）

npm create vue@latest    # 勾选 TypeScript / Vue Router / Pinia / ESLint
cd my-project
npm install
npm run dev              # http://localhost:5173

项目结构：

my-project/
├── index.html           # 入口 HTML
├── vite.config.ts       # Vite 配置
├── tsconfig.json        # TypeScript 配置
├── env.d.ts             # 环境变量类型声明
├── public/              # 静态资源
└── src/
    ├── main.ts          # 应用入口（createApp）
    ├── App.vue          # 根组件
    ├── components/      # 组件目录
    ├── views/           # 页面视图
    ├── router/          # 路由
    └── stores/          # Pinia 状态

SFC（单文件组件）

Vue 最核心的特点——一个 .vue 文件包含三部分：

<script setup>
// 3. 逻辑（Composition API）
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <!-- 1. 模板（HTML） -->
  <button @click="count++">点击了 {{ count }} 次</button>
</template>

<style scoped>
/* 2. 样式（scoped 自动生成唯一属性前缀） */
button { color: blue; }
</style>

为什么 SFC 好？ 组件的模板、逻辑、样式在同一个文件中，职责内聚，易于维护。

开发工具

工具	用途
VSCode + Volar	Vue 官方推荐编辑器插件（替代 Vetur），提供模板表达式类型检查、自动补全
Vue DevTools	浏览器扩展（Chrome / Firefox），查看组件树、响应式数据、Pinia、路由
vite-plugin-vue-devtools	在页面内嵌 DevTools 面板，无需单独安装浏览器扩展

Hello World 三连

<!-- App.vue -->
<script setup>
import { ref } from 'vue'
const name = ref('Vue')
</script>

<template>
  <h1>Hello {{ name }}!</h1>
  <input v-model="name" />
</template>

效果：输入框修改 → <h1> 立即同步更新——这就是声明式渲染。

小结

概念	要点
渐进式	从 CDN 到完整 SPA，按需使用
Vue 3 优势	Proxy 响应式、Composition API、TS 原生支持、Tree-shaking
推荐搭栈	Vite + Vue 3 + TypeScript + Vue Router + Pinia
SFC	<template> + <script setup> + <style scoped>
IDE	VSCode + Volar + Vue DevTools

下一节：模板语法与指令

贡献者: 布欧-Lewyon