文章目录
- 简介
- 什么是Vue
- 概述
- 优势
- MVVM框架
- Vue的特性
- 数据驱动视图
- 双向数据绑定
- 指令
- 插件
- Vue的版本
- 版本概述
- 新版本Vue 3
- Vue 3新特性
- UI组件库
- UI组件库概述
- 常用UI组件库
- 安装Vue
- 安装Vue
- 查看Vue版本
- 实例
- 利用Vue命令创建Vue项目
- 切换工作目录
- 安装vue-cli脚手架
- 创建Vue项目
- 启动Vue项目
- 项目运行过程
- 项目目录结构
- 利用Vite工具创建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)以及 o n ( ) 、 on()、 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来构建用户界面。