【愚公系列】《循序渐进Vue.js 3.x前端开发实践》003-走进 Vue 3的新世界：Vue 框架初体验

愚公搬代码

已于 2025-01-25 11:57:07 修改

阅读量4.8w

点赞数 33

分类专栏：愚公系列-书籍专栏文章标签： vue.js 前端框架

于 2024-08-18 23:57:59 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/141307968

版权

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

随着前端技术的不断发展，各种框架应运而生，而 Vue.js 凭借其简洁、灵活的特性，成为了许多开发者的首选。如今，Vue 3 的推出为这个流行框架注入了更多活力与创新。在这个全新的版本中，不仅引入了组合式 API、改进的性能，还为开发体验带来了更多可能性。

在这篇文章中，我们将通过一次轻松的“初体验”之旅，带你领略 Vue 3 的独特魅力。无论你是前端小白，还是已有经验的开发者，都能通过这个介绍迅速上手，感受到 Vue 框架的强大与易用性。让我们一起走进 Vue 3 的新世界，开启前端开发的新篇章吧！

🚀一、Vue 框架初体验

Vue 的核心代码体积小，因此可以直接通过 CDN 引入，从而在网页的 <script> 标签中使用 Vue 来组织页面逻辑。Vue 还提供了配套的脚手架工具，通过组合这些工具，可以构建包含插件管理、编译、测试和发布的完整工具链，以创建大型项目。

在学习和测试 Vue 的功能时，我们将直接通过 CDN 引入 Vue 框架，这有助于我们更专注于框架本身的学习。本书中，我们将全部采用最新的 Vue 3.x 版本来编写示例。

CDN 的优势

CDN（Content Delivery Network，内容分发网络）是一种通过在多个地理位置部署服务器来提供快速、可靠和高效的数据传输服务的网络。在前端开发中，CDN 通常用于加速静态资源的加载速度，例如 JavaScript 库、CSS 样式表和图片等。通过将静态资源托管在 CDN 上，用户可以从离他们最近的服务器获取资源，从而减少延迟并提高加载速度。

对于 Vue 这样的轻量级框架，其核心代码体积小，适合通过 CDN 方式引入。使用 CDN 不仅可以节省服务器带宽和资源，还可以提高用户的访问速度和体验。

示例代码

以下是一个示例代码，演示如何通过 CDN 方式引入 Vue：

<!DOCTYPE html>
<html>
<head>
    <title>Vue CDN 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        {
  { message }}
    </div>
    <script>
        const app = Vue.createApp({
     
            data() {
     
                return {
     
                    message: 'Hello, Vue!'
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

在上述示例中，通过<script>标签成功引入了Vue的CDN链接：https://cdn.jsdelivr.netnpm/vue。引入之后，我们可以在页面中利用 Vue 的功能，例如创建 Vue 实例、实现数据绑定等。本节将通过引入 Vue 框架来编写一些简单的前端功能页面。通过这些示例，我们将体验 Vue 框架的基本编程思路，并了解其如何简化前端开发流程。

🔎1.第一个 Vue 工程

在 VS Code 中启动第一个 Vue 项目

本节将向读者展示如何在 VS Code 编辑器中启动第一个 Vue 项目。VS Code 是一款功能强大的编辑器，其丰富的扩展功能主要通过插件实现。

安装 Vetur 插件

为了支持 Vue 语言，我们首先需要在 VS Code 中安装 Vetur 插件。Vetur 插件为 VS Code 增加了对 Vue 的支持，包括以下功能：

代码高亮
关键词提示
代码块补全

这些功能显著增强了 Vue 的开发体验。

安装步骤

打开 VS Code 的插件管理模块。
在搜索框中输入 “Vetur”。
点击安装。

如图所示，按照上述步骤完成插件的安装。

在这里插入图片描述

🔎2.源码解读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 Demo</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div style="text-align: center;" id="Application">
        <h1>{
  { count }}</h1>
        <button v-on:click="clickButton