偷学一波 Vue 3 !

背景

大家好，我是小哈~

最近私底下准备整个前后端分离的博客项目，前端这块在技术选型上选择了 Vue 3，但是对于一个搞后端的，这块是盲点，虽然以前在中台的时候，前端组因为人手有限需要后端成员自行学会联调接口，也给咱培训了一下基础的用法（内心是拒绝的），但是也好久没再碰了，现在只有大致的印象。

而且 Vue 3 相对于 Vue 2 又更新了一些新特性, 于是学习了一波，在这里给大家分享出来，算是入门。

PS: 教程第一时间会发布在个站犬小哈教程上：www.quanxiaoha.com

目录

• 什么是 Vue ?

• 渐进式框架

• 组件化

• Vue 3 环境安装

• 第一步：安装 Node.js 环境

• 第二步：验证是否真的安装成功了

• 创建第一个 Vue 3 项目

• 项目目录说明

• 启动项目

• 打包项目

• 安装 VSCode

• VSCode 简介

• 下载安装包

• 开始安装

• 使用界面

• VSCode 设置中文

• 开始设置

• 汉化后的界面

• 开发 Vue 3 必备的 VSCode 插件

• 一、Vue Language Features (Volar) 插件

• 二、Vue 3 Snippets 插件

• 如何安装插件？

• 使用 VSCode 开发第一个 Vue 应用

• 打开项目

• 核心文件说明

什么是 Vue ?

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 渐进式框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、响应式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以轻松搞定。

下面是一段示例代码，其功能用于实现一个简单的计数器：

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <!-- 点击按钮对 count 变量执行加一操作， 并实时渲染到按钮上 -->
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

上面的示例展示了 Vue 两个核心的功能点：

• 声明式：Vue 基于标准的 HTML 语法上做了一层拓展，我们可以通过声明式的描述 HTML 与 JavaScript 状态之间的关系，如示例中的插值语句 {{ count }}、点击事件 @click="count++"；
• 响应式渲染 ：Vue 会自动跟踪 JavaScript 状态，并实时更新 Dom 元素。无需再像 JQuery 那样手动更新 Dom 元素。

渐进式框架

Vue 是一个功能强大框架，也是一个生态。你可以用不同的方式来使用它：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

怎么理解渐进式这个词？

你可以这样理解它：Vue 非常灵活，可以渐近式的适配不同的开发场景。举个栗子，比如老项目使用的 JQuery，而我又想使用 Vue, 新建页面时，仅需引入 Vue 的库，就可以通过它来开发了，无需构建步骤。由此可见，Vue 在设计上非常注重灵活性，我们 “可以被逐步集成” 它。

组件化

当我们通过构建工具来创建项目时，会看到工程目录中有以 .vue 为后缀的类似 HTML 的文件，它们就是 Vue 组件，文件内部会将一个组件的逻辑（JavaScript）, 模板（HTML) 和样式 （CSS）封装在一起。

Vue 3 环境安装

第一步：安装 Node.js 环境

访问 Node.js 官网：https://nodejs.org/en，点击左侧的下载按钮，下载 Node.js LTS 版本的安装包：

注意：学习 Vue 3, 你需要安装 Node.js 16.0 版本或者更高, LTS 表示该安装包是一个被长期支持的版本，可以理解成是一个稳定版本。

下载 Node.js 安装包

下载完成后，双击开始安装：

Node.js 安装文件

无脑点击下一步【Next】按钮即可，其中，需要勾选接受协议，以及自选选择安装路径，小哈这里直接使用的默认安装路径 C盘：

安装 Node.js

继续点击【Next】按钮, 然后进入安装：

安装 Node.js

等待其安装成功：

Node.js 正在安装中

然后点击【Finish】按钮，到这里 Node.js 就安装成功了：

Node.js 安装完成

第二步：验证是否真的安装成功了

按住快捷键 win + R 输入 cmd 打开命令行，或者使用 PowerShell 等其他命令行工具，执行如下命令：

node -v
npm -v

如果能够正确输出版本号，则表示 Vue 的环境搭建成功：

确认 Node.js 环境是否安装成功

创建第一个 Vue 3 项目

在 D 盘下创建一个 vue-projects 文件夹，用于统一存放 Vue 项目，然后打开命令行，执行如下命令，进入到该文件夹中：

cd D:\vue-projects

然后，执行初始化 Vue 项目命令：

npm init vue@latest

TIP: 该命令会安装并执行 create-vue, 它是 Vue 官方的项目脚手架工具。

创建第一个 Vue 项目

执行过程中，会提示你命名新项目，以及是否需要开启一些诸如 TypeScript 和测试支持之类的可选功能，这里如果不确定，统一敲击回车键选择 No 即可。当你看到命令行中提示 Done ， 表示你已经创建好了第一个 Vue 应用。

项目目录说明

创建好了第一个 Vue 应用后，进入该项目文件夹，看下目录结构：

Vue 3 应用目录结构

解释一下目录结构以及相关文件的作用：

• node_modules : 项目依赖包文件夹，比如通过 npm install 包名 安装的包都会放在这个目录下；
• public : 公共资源目录，用于存放公共资源，如 favicon.ico 图标等；
• index.html : 首页；
• package.json : 项目描述以及依赖；
• package-lock.json : 版本管理使用的文件；
• README.md : 用于项目描述的 markdown 文档；
• src : 核心文件目录，源码都放在这里面；

进入 src 文件夹，目录如下：

src 目录

• assets : 静态资源目录，用于存放样式、图片、字体等；
• components: 组件文件夹，通用的组件存放目录；
• App.vue: 主组件，也是页面的入口文件，所有页面都是在 App.vue 下进行路由切换的；
• main.js : 入口 Javascript 文件；

启动项目

进入到想要启动的项目文件夹中，执行如下命令，为项目创建依赖并执行：

# 进入项目文件夹
cd <your-project-name>
# 安装项目所需依赖
npm install
# 启动项目
npm run dev

启动成功后，会提示项目的访问地址，如 http://localhost:5173/:

启动 Vue 项目

在浏览器地址栏中访问该地址，即可访问该 Vue 项目啦，整个过程还是非常简单的。

Vue 启动页面展示

打包项目

首先，通过命令行进入到项目所在目录中，当需要将 Vue 项目打包发布到生产环境时，执行如下命令：

npm run build

打包 Vue 项目

执行成功后，会在项目文件夹中看到多了一个 dist 文件夹：

该文件下放置的就是编译后的静态文件，如 html、css、js 等相关文件：

Vue 项目编译后的文件

至此，该 Vue 项目就打包好了。

安装 VSCode

为了更高效率的开发 Vue 3，我们需要有个趁手的兵器，也就是开发工具。比较常见的如 VSCode 、Webstorm 等，但是官方推荐使用 VSCode， 那我们就通过 VSCode 来开发 Vue 3。

VSCode 简介

VSCode 全称 Visual Studio Code，是微软出的一款轻量级代码编辑器，它具有如下特点：

• 开源且免费；
• 代码智能提示、自动补全功能；
• 可自定义配置；
• 支持丰富的文件格式；
• 代码调试功能强大；
• 各种方便的快捷键；
• 强大的插件拓展功能；

下载安装包

前往 VSCode 官网：https://code.visualstudio.com/ 下载对应系统的安装包，小哈这里用 Windows 系统来演示：

官网下载 VSCode 安装包

开始安装

下载成功后，双击安装包开始安装 VSCode:

VSCode 安装包

勾选【我同意此协议】，点击下一步按钮：

同意安装协议

自定义安装路径，小哈这里安装在了 D 盘，可自行选择安装位置，继续点击下一步按钮：

自定义 VSCode 安装路径

继续点击下一步按钮:

勾选【创建桌面快捷方式】，点击下一步：

创建 VSCode 桌面快捷启动方式

点击【安装】：

开始安装 VSCode

等待一分钟左右，即可安装成功，然后点击【完成】按钮：

VSCode 安装完成

使用界面

启动成功后，即可看到如下界面，至此，VSCode 就安装成功啦~

VSCode 界面

VSCode 设置中文

TIP: 汉化是可选项，针对初学者来说，全英文化的 VSCode 可能不太友好，所以，根据自己的需求来确定是否需要汉化，小哈个人推荐不要汉化，用着用着就习惯了。

开始设置

在 VSCode 的左侧栏，可以看到插件市场选项，如下图所示：

VSCode 插件市场

打开插件市场，搜索关键词【中文】，即可看到中文汉化插件，点击【Install】安装：

VSCode 安装中文插件

安装成功后，右下角会提示是否需要立刻重启 VSCode 来使汉化生效，点击重启：

重启 VSCode

汉化后的界面

重启 VSCode 后，你就可以看到所有菜单均已被设置成中文了：

中文汉化后的 VSCode

开发 Vue 3 必备的 VSCode 插件

本小节中，我们将在 VSCode 中安装上开发 Vue 3 必备的 2 个插件。

一、Vue Language Features (Volar) 插件

简介：这是一款专用于构建 Vue 的拓展，想要在 VSCode 上开发 Vue 3 应用，这款插件必不可少。

Volar 插件

二、Vue 3 Snippets 插件

简介：Vue 3 代码自动提示和代码补全插件，提升编码效率。

Vue 3 Snippets 插件

如何安装插件？

前面的VSCode 安装中文汉化插件一节中，已经详细演示了如何在 VSCode 中安装想要的插件，不清楚的小伙伴可以跳转前面小节查阅。这里就不重复讲了。

使用 VSCode 开发第一个 Vue 应用

前面小节中已经通过命令行创建了第一个 Vue 应用，本小节中，我们将通过 VSCode 来打开它，并通过 Vue 的双向绑定功能，实现一个简单的计数器功能。

打开项目

点击 VSCode 左上角菜单：文件 -> 打开文件夹，导入之前创建好的 vue-test 项目：

TIP : 或者你也可以将项目文件夹直接拖入 VSCode 来打开项目。

打开 Vue 项目

导入成功后，视图如下：

核心文件说明

在前面创建项目小节中，我们已经了解了各个文件夹，以及文件的大致用途。这里小哈针对最核心的 3 个文件再详细说明一下，分别是：

• index.html ：首页；
• main.js  ：主 js 文件；
• App.vue : 主组件；

这 3 者之间的关系如下：

依赖关系

当打开一个 Vue 3 应用，首先先看 index.html 文件，它是首页，代码如下，这里小哈已经添加好注释说明：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <!-- 指定挂载点，用于渲染组件 -->
    <div id="app"></div>
    <!-- 引入主 js 文件 -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

再来看 main.js 文件：

import { createApp } from 'vue' // 引入 createApp 方法
import App from './App.vue'     // 引入 App.vue 组件

import './assets/main.css'      // 引入 main.css 样式文件

// 创建应用，并将 App 根组件挂载到 <div id="#app"></div> 中
createApp(App).mount('#app')

再看 app.vue 组件代码：

<script setup>
// 引入自定义组件
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

作为初学者，为了更方便的学习，我们先将多余的代码删除掉，只保留结构，如下图所示：

结构分为 3 个部分：

• script : 节点中间用于放置 javascript 代码；

• template : 节点中间用于放置 html 代码；

• style : 节点中间用于放置 css 样式代码；

<script setup>
 <!-- js 代码, setup 标识通常和组合式 API 搭配使用, 用于告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API -->
</script>

<template>
 <!-- html 代码 -->
</template>

<style scoped>
 <!-- css 代码， scoped 表示节点内 css 样式只针对此组件有效，不影响其他组件 -->
</style>

然后，我们在 <template> 标签下添加一个 <h1> 标题：

<script setup>
</script>

<template>
  <h1>Hello, Vue 3 !</h1>
</template>

<style scoped>
</style>

保存代码并刷新页面，效果如下：

再次修改代码，添加一个用于计数的 <button  按钮，同时引入 ref 函数声明一个 count 响应式变量：

<script setup>
import { ref } from 'vue';

// 定义一个 count 计数变量，同时通过 ref 声明其是一个响应式数据，实现数据的双向绑定
const count = ref(0)
</script>

<template>
  <h1>Hello, Vue 3 !</h1>
  <button @click="count++">Count: {{ count }}</button>
</template>

<style scoped>
</style>

保存代码并刷新页面，点击按钮，可以看到当点击按钮时，会对 count 进行 +1 操作，由于该变量是个响应式的，变量数值变化后也会同步渲染到按钮上，非常简单就实现了一个双向绑定功能。

结语

本文中，小哈带着大家了解了 Vue, 以及上手安装了 Vue 3 的环境，最后通过官方推荐的 VSCode 开发工具开了第一个计数小项目，希望对学习 Vue 3 有兴趣的小伙伴有所帮助，后期还会持续分享 Vue 3 相关的文章，欢迎关注。

最近面试BAT，整理一份面试资料《Java面试BATJ通关手册》，覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。

获取方式：点“在看”，关注公众号并回复 Java 领取，更多内容陆续奉上。

PS：因公众号平台更改了推送规则，如果不想错过内容，记得读完点一下“在看”，加个“星标”，这样每次新文章推送才会第一时间出现在你的订阅列表里。

点“在看”支持小哈呀，谢谢啦