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的热更新，开发时改代码超高效。

总结

Vue3是轻量、易用的前端框架，核心优势是上手快、性能好，适合新手入门；
学Vue3前需掌握HTML/CSS/JS基础，开发环境要安装Node.js（用node -v/npm -v验证）；
体验Vue3有两种方式：CDN（零门槛）、Vite创建项目（实际开发），核心文件是main.js（入口）和App.vue（根组件）。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/1220476.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！