初探Vue前端框架

简介

大家好，今天我们将一起初探Vue前端框架。Vue是一款轻量级、易学且灵活的前端框架，它通过虚拟DOM技术和组件化开发，极大地提高了开发效率和项目的可维护性。

什么是Vue

概述

Vue（读音：/Vjuː/）是一款用于构建用户界面的渐进式框架。其中，“渐进式”是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。

优势

• 轻量级：Vue是一个轻量级的前端开发框架，文件体积小。
• 降低学习门槛：Vue项目基于JavaScript语言开发，开发者不用单独学一门陌生的语言，从而降低了学习的门槛。
• 使用灵活：Vue在使用上比较灵活，开发人员可以选择使用Vue开发一个全新项目，也可以将Vue引入现有项目。
• 虚拟DOM技术：Vue通过虚拟DOM技术减少对DOM的直接操作，并通过尽可能简单的API来实现响应的数据绑定，可支持单向和双向数据绑定。
• 组件化开发：Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于团队的协同开发。
• 工程化开发：Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高了项目的开发效率，降低了大型项目的开发难度。

MVVM框架

Vue是基于MVVM模式的框架，MVVM主要包含Model（数据模型）、View（视图）和ViewModel（视图模型）。Model是指数据部分，负责业务数据的处理；View是指视图部分，即用户界面，负责视图处理；ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。

Vue的特性

数据驱动视图

在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构。

双向数据绑定

Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。例如，用户在填写表单时，双向数据绑定可以辅助开发者在无须手动操作DOM的前提下，自动同步用户填写的内容数据，从而获取表单元素最新的值。

指令

指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if指令用于实现页面条件渲染，v-for指令用于实现页面列表渲染等。

插件

Vue支持插件，通过加载插件可以实现更多的功能。常用的插件有Vue Router（路由）、Vuex（状态管理库）、Pinia（轻量级状态管理库）等，这些插件经过简单配置就可以使用。

Vue的版本

版本概述

目前，Vue共有3个大版本，分别是Vue 1、Vue 2和Vue 3。其中，Vue 1几乎被淘汰，不建议学习与使用；Vue 2和Vue 3目前被广泛应用，并且Vue 3将会逐步替代Vue 2。

新版本Vue 3

Vue 3支持Vue 2中绝大多数的API与特性，同时Vue 3还新增了一些特有的功能，并废弃了Vue 2中的一些旧功能。Vue 3新增的功能包括组合式（Composition）API、多根节点组件等；废弃的旧功能包括过滤器（Filter）以及$on()、$off()和$once()实例方法等。虽然从表面上看，Vue 3和Vue 2的使用方式没有太大的差异，但Vue 3的底层代码发生了很大变化，包括渲染、数据监听、双向绑定、生命周期等。

Vue 3新特性

• 体积更小，采用按需编译的方式编译出来的文件体积比Vue 2的小。
• 性能提升，运行速度比Vue 2快1.5倍左右。
• 具有更好的TypeScript支持。
• 暴露了更底层的API，可以通过多种方式组织代码，代码使用上更加灵活。
• 提供了更先进的组件。Vue创建了一个虚拟的Fragment节点，允许组件中有多个根节点。
• 提供组合式API，能够更好地组合逻辑、封装逻辑、复用逻辑。

UI组件库

UI组件库概述

为了提高开发效率，开发者可以在项目中添加UI组件库。UI组件库可以理解成一个可重复使用的界面设计元素的集合体，使用它可以更快速地开发用户界面。

常用UI组件库

• Element Plus组件库：Element Plus是一款基于Vue 3的组件库，提供丰富的UI组件和功能，适用于快速开发现代化的Web应用。它遵循Material Design设计语言，支持多平台和国际化。
• Vant组件库：Vant是一个基于Vue 3的移动端组件库，提供了丰富的UI组件和实用的工具函数，旨在帮助开发者快速构建高性能的移动应用界面。它遵循Material Design设计语言，支持按需引入，具有良好的兼容性和可扩展性。从3.0版本开始支持Vue 3。
• Ant Design Vue组件库：Ant Design Vue是一个基于Vue.js的UI组件库，提供了一系列预制的组件和模板，用于快速构建高质量的Vue应用程序界面。它遵循Ant Design的设计理念，支持定制化和国际化。从2.0版本开始支持Vue 3。
• 主流UI组件库都已经发布了支持Vue3的版本。

安装Vue

安装Vue

执行命令：npm install -g vue

查看Vue版本

执行命令：vue --version

实例

利用Vue命令创建Vue项目

切换工作目录

工作目录：D:\project_practice

安装vue-cli脚手架

执行命令：npm install -g @vue/cli

创建Vue项目

• 方法一：用vue init命令
  执行命令：vue init webpack vue3-demo-1

• 方法二：用vue create命令
  执行命令：vue create vue3-demo-2
  采用缺省预设模式 - 第一项，直接敲回车

启动Vue项目

• 启动vue3-demo-1项目

  • 进入项目目录
    执行命令：cd vue3-demo-1
  • 启动项目服务
    执行命令：npm run dev
    编译成功，访问网址：http://localhost:8080
  • 查看项目首页
    访问http://localhost:8080
  • 停止项目服务
    按组合键Ctrl + C

• 启动vue3-demo-2项目

  • 进入项目目录
    执行命令：cd ../vue3-demo-2
  • 启动项目服务
    执行命令：npm run serve

项目运行过程

当执行npm run dev或npm run serve命令启动服务时，项目就会运行起来，该项目会通过src\main.js文件将src\App.vue组件渲染到index.html文件的指定区域。

项目目录结构

• vue3-demo-1项目目录结构
• vue3-demo-2项目目录结构

利用Vite工具创建Vue项目

概述

通过模板自动创建项目的方式相对简单，它通过附加的命令行选项直接指定项目名称和模板，省去了填写项目名称、选择框架和变体等环节。Vite提供了许多模板预设，可以创建Vite+React+TS、Vite+Vue、Vite+Svelte等类型的项目。

命令

• 使用npm 6或更低版本创建项目
  npm create vite@latest <项目名称> --template <模板名称>

• 使用npm 7或更高版本创建项目
  npm create vite <项目名称> -- --template <模板名称>

• 使用yarn create命令创建项目
  yarn create vite <项目名称> --template <模板名称>

实战

• 切换到工作目录

• 基于模板创建项目
  使用yarn创建一个基于Vite+Vue模板的项目，执行命令：yarn create vite hello-vite --template vue

• 启动项目，开启本地服务
  切换到项目目录，安装项目全部依赖
  执行命令：yarn dev，启动服务

• 访问项目首页
  在浏览器里访问http://localhost:5173
  单击三次按钮，程序自动计数

通过今天的实战，希望大家能够对Vue有一个初步的了解，并能够在实际项目中运用Vue来构建用户界面。