Vue3 入门概述 + 基于WebStorm创建第一个Vue3项目

全新响应式原理：Vue2 基于 Object.defineProperty，存在数组、对象深层监听缺陷；Vue3 基于 Proxy 实现响应式，支持全类型数据监听，无监听漏洞。
组合式API（Composition API）：摒弃 Vue2 选项式API按类型拆分代码的弊端，支持按业务逻辑聚合代码，大型项目代码可读性、可维护性大幅提升。
性能全面提升：虚拟DOM重写、编译优化、静态提升、事件缓存，页面渲染和更新速度远超 Vue2，打包体积更小。
原生TS支持：源码基于 TypeScript 重写，天然适配类型校验，适合大型团队协作开发。
官方Vite构建工具：默认搭配 Vite 替代老旧的 Webpack，实现秒启动、极速热更新，开发体验拉满。

3. Vue3 两大核心语法体系

（1）选项式API（Options API）

Vue2 传统写法，Vue3 完全兼容。通过 data、methods、computed、watch 等配置项拆分代码，结构规整，但大型项目中业务逻辑分散，不利于维护，仅适用于小型项目和旧项目维护。

（2）组合式API（Composition API）

Vue3 主推写法，主流项目唯一选型。依托 <script setup> 语法糖，无需拆分配置项，可将同一业务的变量、方法、监听逻辑聚合在一起，支持自定义 Hooks 抽离复用逻辑，适配所有新项目开发。

4. Vue3 配套生态

构建工具：Vite（官方首选）
路由：Vue Router 4.x
状态管理：Pinia（替代 Vuex）
UI组件库：Element Plus、Naive UI、Vuetify 3

二、前期环境准备（WebStorm开发必备）

创建 Vue3 项目前，需提前安装基础环境，所有操作适配 WebStorm 终端：

1. 安装 Node.js

Vue3 工程化项目依赖 Node.js 环境，推荐安装 v16+ 稳定版本。

安装完成后，打开 WebStorm 终端，输入以下命令验证：

node -v
npm -v

输出版本号即代表环境配置成功。

2. 开发工具：WebStorm

WebStorm 是前端专业开发IDE，内置终端、代码提示、Vue语法校验、自动格式化功能，开箱即用，无需额外配置基础插件。

三、基于WebStorm创建第一个Vue3项目

目前 Vue3 官方唯一推荐创建方式：create-vue 脚手架（基于Vite），替代老旧的 vue-cli（Webpack），启动更快、配置更简洁。

步骤1：打开WebStorm，执行创建命令

打开 WebStorm，点击底部 Terminal（终端），输入官方创建命令：

npm create vue@latest

步骤2：自定义项目配置（新手推荐默认选择）

执行命令后，终端会弹出交互式配置选项，新手可参考以下选择（按需配置）：

Project name：项目名称（自定义，例如 vue3-first-demo）
Add TypeScript?：是否开启TS（新手选 No）
Add JSX Support?：是否支持JSX（新手选 No）
Add Vue Router?：是否添加路由（新手选 No）
Add Pinia?：是否添加状态管理（新手选 No）
Add Vitest?：单元测试（No）
Add ESLint?：代码校验（新手可选 Yes，规范代码格式）

步骤3：安装依赖并启动项目

配置完成后，终端会提示执行以下三条命令，依次输入：

# 进入项目目录
cd vue3-first-demo

# 安装项目依赖
npm install

# 启动开发服务
npm run dev

步骤4：访问项目

启动成功后，终端会输出访问地址，默认：http://localhost:5173，打开浏览器即可看到 Vue3 官方默认页面，至此第一个 Vue3 项目创建成功！

四、Vue3项目核心目录解析（WebStorm视图）

创建完成后，WebStorm 左侧会展示项目目录，核心文件重点解析：

vue3-first-demo
├── public          # 静态资源目录（不被Vite打包处理）
├── src             # 项目核心源码目录
│   ├── assets      # 静态资源（图片、全局样式）
│   ├── components  # 自定义公共组件
│   ├── App.vue     # 根组件（项目入口组件）
│   └── main.js     # 项目入口文件
├── vite.config.js  # Vite核心配置文件（端口、代理、别名）
└── package.json    # 项目依赖、脚本配置

核心文件详解

1. main.js（项目入口）

Vue3 全新入口语法，通过createApp 创建实例并挂载：

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'

// 创建Vue实例并挂载到index.html的#app节点
createApp(App).mount('#app')

2. App.vue（根组件）

项目的根组件，所有页面、组件都在其内部渲染，是项目最核心的组件。

3. vite.config.js（项目配置）

可自定义端口、跨域代理、路径别名等，是项目工程化配置的核心文件。

五、编写第一个Vue3组合式API代码

我们在默认项目基础上，编写一段极简的 Vue3 组合式API代码，体验核心语法，修改 App.vue：

<template>
  <div class="app">
    <h2>我的第一个Vue3项目</h2>
    <p>计数器：{{ num }}</p>
    <button @click="addNum">点击+1</button>
  </div>
</template>

<script setup>
// 导入Vue3核心API
import { ref } from 'vue'

// 定义响应式数据
const num = ref(0)

// 定义点击方法
const addNum = () => {
  num.value++
}
</script>

<style scoped>
.app {
  text-align: center;
  margin-top: 50px;
}
button {
  padding: 6px 16px;
  cursor: pointer;
}
</style>

保存文件后，Vite 会秒级热更新，无需刷新页面即可看到效果，这也是 Vite+Vue3 的核心优势。

六、项目常用命令

WebStorm 终端直接执行，适配项目开发、打包全流程：

npm run dev    # 启动本地开发服务
npm run build  # 打包项目，生成dist上线文件
npm run preview# 本地预览打包后的项目

七、总结

1. Vue3 是 Vue 的迭代升级版，核心优势为 Proxy响应式、组合式API、Vite极速构建、TS原生支持，是目前前端主流技术；

2. 新项目统一使用 create-vue + Vite 搭建，摒弃老旧 vue-cli 脚手架；

3. WebStorm 可完美适配 Vue3 项目开发，内置终端、语法提示，开发效率极高；

4. Vue3 开发核心主推 <script setup> 组合式API，逻辑聚合、代码简洁，适配所有企业级项目。

亚马逊云科技技术品牌专区

更多推荐

2026年麒麟KYCP云计算认证深度解析：高级信创云人才的能力标尺

麒麟KYCP云计算是信创云平台高级运维认证，由工信部与麒麟软件联合颁发，聚焦KVM虚拟化、Kubernetes编排及信创云安全架构。考试含100题（单选70+多选20+判断10），90分钟需达70分合格，较初级KYCA难度显著提升。持证者可胜任政企信创云架构师等岗位，契合2026年信创规模化落地的人才缺口。备考建议分四阶段：基础巩固（1周）、K8s进阶（2-3周）、安全强化（1周）及模拟冲刺，需重