【Vue3 基础篇】01.初识 Vue

最新推荐文章于 2025-05-14 15:47:11 发布

一百个Chocolate

最新推荐文章于 2025-05-14 15:47:11 发布

阅读量766

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue3 入门到实战（预售）文章标签： typescript element-plus vue3 pinia 前端

原则上允许部分内容转载，转载请注明原文章地址！

本文链接：https://blog.csdn.net/weixin_42429718/article/details/129637843

Vue3 入门到实战（预售）专栏收录该内容

26 篇文章 ¥9.90 ¥99.00

订阅专栏

本文介绍了Vue3的基础知识，包括Vue的特点、为什么学习Vue3，以及如何创建Vue应用。重点讲解了安装VSCode、必备插件和创建Vue项目的步骤，最后展示了编写第一个HelloWorld组件的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是 Vue？

官方的定义是：渐进式 JavaScript 框架。易学易用，性能出色，适用场景丰富的 Web 前端框架。同时他还有三个特点：

1.易学易用：
基于标准 HTML、CSS 和 JavaScript 构建，加上一流的文档介绍和易懂的 API ，相较于其它框架能快速上手。

2.性能出色
经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。

3.灵活多变
丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。

简单来说 Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

为什么学习 Vue3？

Vue 2 将于 2023 年 12 月 31 日 停止维护，且大部分工作要求前端开发者能掌握这项技能。学习 Vue 3 不需要 Vue 2 的前置知识，对于初学者完全可以直接上手 Vue 3 。

渐进式框架

Vue.js 只提供组件系统、双向绑定等最核心的功能，其它的功能则是围绕Vue.js 开发的库（例如vuex、vue-router等），这样开发者就可以根据需求场景进行渐进式添加了。

如果上述的介绍你还一知半解，不用担心，相信后面学完之后再回看，就会有不一样的体会。

安装代码编辑器 VSCode

VSCode 是前端使用最多的代码编辑器，他有很多优点：

OpenSource：免费开源，开箱即用。
IntelliSense：智能代码补全。提供基于变量类型、函数定义和导入模块的智能补全。
Debug：直接从编辑器调试代码。启动或附加到正在运行的应用程序，并使用断点、调用堆栈和交互式控制台进行调试。
Git：内置 Git 命令。使用 Git 变得更加简单。可以查看差异、暂存文件并直接从编辑器进行提交等。
Extensible：可扩展。丰富的插件生态，添加新语言、主题、调试器并连接到其他服务等拓展更多支持。扩展在单独的进程中运行，不会减慢您的编辑器。
Customizable：自定义。可以通过简单的配置调整来满足编辑习惯，并且可以通过登录 GitHub 账号实现配置自动同步。

安装 VSCode：Visual Studio Code

添加 VSCode 插件

VSCode本身值提供最基础的功能，想要有更好的体验的话，需要通过VSCode插件实现。

具体方式点击最左侧的图标，搜索对应名称的插件点击安装即可。
安装成功后则变成一个工具设置的小图标，后面我们可以在进行插件的卸载等操作。

这里推荐本次实战项目装的一些插件：

必装：

Chinese (Simplified)：汉化。让vscode显示变为简体中文。
Volar：Vue 官方推荐的 VSCode 扩展。vue3 版本的 Vetur，提供 Vue3 语言支持。

规范相关，推荐装：

EditorConfig for VSCode：让编辑器遵守协作规范的插件。
Prettier for VSCode：VSCode 使用 Pretter 进行代码格式化。
ESLint for VSCode：ESLint 在 VSCode 的一个扩展，以便获得更好的代码提示。

节省时间，推荐装：

Vue VSCode Snippets：快捷生成 Vue 代码模板片段。
Auto Close Tag： HTML 标签自动闭合。
Auto Rename Tag：自动重命名标签。修改前半部分修改，后面闭合部分同步修改，不需要自己找到闭合标签。

创建Vue应用

创建 Vue 应用的方式有两种，第一种是通过官方的脚手架创建，第二种是通过 CDN 使用 Vue。这里我们用常见的第一种创建方式。

在创建前请确认自己的 Node.js 版本，需要是 16.0 及以上版本。node 安装。

我们选择一个文件进入控制台（创建后的应用将会被放在这个文件夹下），我们执行这个命令：

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。

create-vue：Vue 官方的项目脚手架工具，将开发过程中要用到的工具、环境都配置好了，这样就可以方便地直接开始做开发，专注业务。

指令运行之后，首先决定自己的项目名称，这里我取名为 vue3-learning，确定后会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，根据需要开启。

最后的项目实战，将在学完 Vue3 、 TypeScript 及 Pinia 之后开展，届时需要将除 Vitest 和 Cypress 的其它可选功能都加上。

完成之后，可以执行下面三段指令，运行项目：

cd vue3-learning
npm install 
npm run dev

编写第一个HelloWorld

光说不练假把式，我们用一个最简单的例子，感受一下 Vue。

官方的脚手架给我写了一些样例，我把不需要的页面都去掉，项目结构可以保留。删除 components 文件夹下的文件（此文件夹下一般用来放通用组件），如果有 views 文件夹，也删除 views 文件夹下的文件（用来放视图展示页面），将 App.vue 改造为如下：

<!-- 编写单文件组件 -->
<script setup></script>

<template>
    <h1>Hello World!</h1>
</template>

<style scoped></style>

创建单文件组件

我们编写了一个 Vue 单文件组件 (Single-File Component，缩写为 SFC)。SFC 是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。

编写模板

在 App.vue 文件里，我们用了 <template> 模板，他是能够拓展标准 HTML 的模板语法。例如，我们可以在 <template> 里根据 JavaScript 的状态描述HTML，当状态改变时，HTML 会自动更新。

这个知识点在后面几章中，我们可以通过例子加深理解。

创建挂载 Vue 实例

接着我们看 main.js 文件

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

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

在 main.js 文件中，createApp 用来创建一个 Vue 实例，传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

应用实例必须在调用了 mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

// index.html
<div id="app"></div>
//main.js
app.mount('#app')

app.mount(document.body.firstChild)

最终我们通过 app.mount() 将应用实例挂载在一个容器元素中，如果该组件有模板或定义了渲染函数，它将替换容器内所有现存的 DOM 节点。在本例中我们运行代码，npm run dev ，就能看到 <h1>Hello World!</h1> 渲染出来了。