vue3教程(1 快速入门)

发布时间 2024-01-03 14:34:05作者: 混凝土钢筋

一、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 元素。

1、渐进式框架

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

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

怎么理解渐进式这个词?

 你可以这样理解它: Vue 非常灵活,可以渐近式的适配不同的开发场景。举个栗子,比如老项目使用的 JQuery,而我又想使用 Vue, 新建页面时,仅需引入 Vue 的库,就可以通过它来开发了,无需构建步骤。由此可见,Vue 在设计上非常注重灵活性,我们 “可以逐步来集成” 它,从单独某个页面使用它,先尝个鲜,到后续慢慢迭代,最终完全替换成 Vue 框架。

2、组件化

当我们通过构建工具来创建项目时,会看到工程目录中有以 .vue 为后缀的类似 HTML 的文件,它们就是 Vue 组件,文件内部会将一个组件的逻辑(JavaScript), 模板(HTML) 和样式 (CSS)封装在一起。现在大致看一眼,后面小节会详细学习。

 

 

二、Vue 3 安装教程(图文讲解)

要想学习 Vue ,首先需要安装好 Vue 的环境。本文我将带着大家一步一步完成 Vue 环境的搭建。

1、安装 Node.js 环境

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

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

下载完成后,双击开始安装:

 

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

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

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

2、验证是否真的安装成功了

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

node -v
npm -v