news 2026/5/3 5:06:21

Vue3 系列教程（一）Vue3初识与环境搭建

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Vue3 系列教程（一）Vue3初识与环境搭建

引言

欢迎来到Vue3零基础入门的第1课。作为前端初学者，从最基础的认知到实际搭建项目，一步一步把基础打牢～

1. 初识Vue3：它到底是什么？值不值得学？

首先咱们得搞清楚核心定位：Vue3是一套用于构建用户界面的前端JavaScript框架。简单说，原生写HTML/CSS/JS时，你需要手动操作DOM（比如改文本、加样式），而Vue把这些繁琐操作封装好了，让你只需要关注“页面该展示什么、交互逻辑是什么”，不用再纠结怎么操作DOM。

对新手来说，学习Vue3的核心价值：

  • 上手快：语法贴近原生HTML/JS，比React、Angular更友好；
  • 生态全：有大量现成组件/工具，开发效率高；
  • 就业广：企业前端岗位中Vue3是高频要求的技能。

2. Vue3核心优势 & 与Vue2的极简区别（新手版）

不用记复杂原理，只记你能感知到的核心差异：

  • 性能更好：运行更快、占用内存更少（底层优化，不用深究）；
  • 写法更灵活：新增“组合式API”，代码组织更自由（后面课程会重点讲）；
  • 体积更小：支持按需引入，打包后的文件更小；
  • 对新手更友好：新增setup语法糖，少写很多冗余代码。

3. 前置基础要求：这些必须先掌握（不然后面会懵）

Vue3是基于HTML/CSS/JS的框架，你得先掌握这些基础（不用精通，但要会用）：

  • HTML：能写div、p、button、input等基础标签，认识class、id、src等属性；
  • CSS：能写基础样式，会用类选择器、行内样式；
  • JS（核心重点）：
    1. 变量声明（用let/const，别再用var）；
    2. 函数定义（普通函数、箭头函数）；
    3. 数组/对象的基础操作（遍历、增删改）；
    4. 知道DOM是什么（不用会原生DOM操作）。

如果这些基础还不熟，建议先补1-2天，否则学Vue会很吃力～

4. 开发环境搭建：Node.js + npm（一步到位）

Vue3项目需要依赖Node.js（提供运行环境）和npm（包管理器，下载依赖），咱们一步步来，全程无坑：

步骤1：安装Node.js
  • 下载地址：https://nodejs.org/（选LTS版本，比如20.x，长期支持版更稳定）；
  • 安装：双击安装包，一路“下一步”即可（Windows记得勾选“Add to PATH”，自动配置环境变量）；
  • 验证安装：打开电脑终端（Windows：CMD/PowerShell；Mac：终端），输入以下命令，能显示版本号就是成功：
node-v# 查看Node版本，比如v20.10.0npm-v# 查看npm版本，比如10.2.3
步骤2：npm基础认知

npm是Node自带的包管理器，核心作用就是下载、管理项目需要的依赖（比如Vue、Vite），新手先不用学复杂命令，记住“npm install”就行（后面会用）。

5. 零门槛体验Vue3：CDN方式写第一个示例

不用先搭复杂项目，咱们先用CDN（直接引入Vue3文件）写个极简示例，先感受Vue的核心用法：

新建一个index.html文件，复制以下代码，用浏览器打开就能看到效果：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>我的第一个Vue3示例</title><!-- 引入Vue3的CDN文件 --><scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><!-- Vue要控制的DOM容器 --><divid="app"><!-- 插值表达式：展示数据 -->{{ message }}</div><script>// 1. 从Vue中取出创建应用的方法const{createApp}=Vue;// 2. 创建Vue应用实例createApp({// 3. 定义响应式数据（后面会细讲）data(){return{message:'你好，Vue3！'};}})// 4. 把应用挂载到id为app的div上.mount('#app');</script></body></html>

✅ 效果：浏览器页面会显示“你好，Vue3！”。
💡 简单解释：

  • createApp：创建Vue应用的核心方法；
  • data()：定义Vue的响应式数据（数据变，页面自动变）；
  • mount('#app')：把Vue应用绑定到指定DOM元素上；
  • {{ message }}：插值表达式，把数据渲染到页面。

6. 实际开发：用Vite创建Vue3项目

CDN适合快速体验，实际开发要搭标准化项目，Vue官方推荐用Vite（新一代构建工具，比Webpack快很多）：

步骤1：创建项目

打开终端，输入以下命令（新手推荐npm方式）：

# npm方式（推荐）npmcreate vite@latest my-vue3-demo -- --template vue# 解释：# my-vue3-demo → 你的项目名称（可自定义，比如vue3-first）# --template vue → 指定模板为Vue（纯JS版本，新手友好）

执行后终端提示“Done”，就说明项目创建成功了。

步骤2：安装依赖

进入项目目录，安装项目需要的依赖：

# 进入项目文件夹cdmy-vue3-demo# 安装依赖npminstall

7. 看懂Vue3项目目录：核心文件/文件夹有啥用？

打开创建好的my-vue3-demo文件夹，只讲新手必懂的核心结构：

my-vue3-demo/ ├── node_modules/ # 项目依赖包（npm install下载的，不用改） ├── src/ # 你主要写代码的地方（核心） │ ├── assets/ # 图片、样式等静态资源（会被打包） │ ├── components/ # 组件文件夹（后面学组件化会用） │ ├── App.vue # 根组件（所有页面内容都嵌套在这里） │ └── main.js # 项目入口文件（创建Vue应用、挂载） ├── index.html # HTML入口（Vite的特殊处理） └── package.json # 项目配置（依赖、启动命令等）

核心文件解释：

  • main.js：项目入口，负责创建Vue应用并挂载到HTML的#app上；
  • App.vue：根组件，是页面的核心容器；
  • package.json：里面的scripts字段有dev（启动项目）、build（打包）等命令。

8. 启动项目：体验热更新（超方便）

步骤1：启动开发服务器

在项目目录的终端输入：

npmrun dev

执行后终端会显示类似信息：

VITE v5.0.0 ready in 300 ms ➜ Local: http://127.0.0.1:5173/ ➜ Network: use --host to expose
步骤2：访问项目

打开浏览器，输入终端里的Local地址（比如http://127.0.0.1:5173/），就能看到Vue3的默认欢迎页面。

热更新体验（新手必试）

打开src/App.vue文件，把里面的“Vite + Vue”改成“我的第一个Vue3项目”，保存后——浏览器页面会自动刷新，不用手动点刷新！这就是Vite的热更新，开发时改代码超高效。

总结

  1. Vue3是轻量、易用的前端框架，核心优势是上手快、性能好，适合新手入门；
  2. 学Vue3前需掌握HTML/CSS/JS基础，开发环境要安装Node.js（用node -v/npm -v验证）；
  3. 体验Vue3有两种方式：CDN（零门槛）、Vite创建项目（实际开发），核心文件是main.js（入口）和App.vue（根组件）。
版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/5/2 23:47:30

高防IP线路质量重要吗

1、高防IP对访问速度的影响 高防IP的线路质量直接关系到用户的访问速度。优质的线路能够确保数据传输的高效与稳定。比如&#xff0c;采用BGP多线接入技术的高防IP线路&#xff0c;能够智能地根据网络情况选择最优路径&#xff0c;实现电信、联通、移动等不同网络用户的高速访…

作者头像 李华
网站建设 2026/5/1 8:54:50

AI编程陷入“越帮越忙”怪圈？垂直深耕才是破局关键

在AI技术快速渗透软件开发领域的今天&#xff0c;“AI辅助编程”早已不是新鲜概念。从代码补全、语法纠错到BUG修复、逻辑优化&#xff0c;各类通用AI编程工具层出不穷&#xff0c;宣称能帮开发者节省80%的调试时间、大幅提升开发效率。但现实往往事与愿违&#xff0c;越来越多…

作者头像 李华
网站建设 2026/4/30 18:30:34

无需等待：飞算JavaAI专业版“三大升级×十大AI工具”速览

自2025年1月发布以来&#xff0c;飞算JavaAI始终以每周一次的节奏快速迭代&#xff0c;累计完成了超过60次功能更新与优化&#xff0c;并已辅助开发者生成了1000000个完整项目。 在免费服务获得广泛认可的同时&#xff0c;我们也清晰地听到了许多用户对“更深层、更强大AI赋能”…

作者头像 李华
网站建设 2026/4/26 1:23:57

计算机毕业设计springboot辅导员用学生管理系统 SpringBoot高校学生事务一站式工作台 基于SpringBoot的辅导员智慧学工助手

计算机毕业设计springboot辅导员用学生管理系统&#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。 一个辅导员要盯 300 学生&#xff1a;谁缺课、谁挂科、谁心理预警、谁该拿奖学金…

作者头像 李华
网站建设 2026/5/2 1:34:52

专为创作者打造的本地优先AI 视频创作工作台

Kmeng AI Animata​ 是一个功能全面、注重隐私和本地化操作的 AI 视频创作工具。它通过整合多种 AI 模型&#xff0c;将角色设计、场景构建、物品生成和视频制作等复杂流程集成到一个统一的工作台中&#xff0c;极大地降低了动画和视频内容的创作门槛&#xff0c;特别适合独立创…

作者头像 李华
网站建设 2026/5/1 7:22:59

多机器人环境监测中的异质性，用于解决时间冲突任务

在多机器人系统执行持续性任务时&#xff0c;若需中断处理紧急的时效性任务&#xff0c;常面临性能平衡的挑战。本研究以区域巡逻与异常无线电信号定位的双重任务场景为例&#xff0c;探讨这一平衡问题。 我们通过两种路径应对该挑战&#xff1a;一是行为异质性&#xff0c;即对…

作者头像 李华