vue3实战！登录注册前端

文章目录

• • 目录

    概要

    整体架构流程

    项目案例

    1.如何把html页面改写到vue项目中

    2.引入element-plus

    3.v-model双向数据绑定

    4.表单验证

概要

Vue 3 是 Vue.js 的最新主要版本，它带来了一些重大改进和新特性：

1. Composition API：提供了更灵活的代码组织方式，特别适合处理复杂逻辑。

2. 性能提升：通过使用 Proxy 作为响应式系统的基础，Vue 3 改善了性能和内存使用。

3. 新内置组件：如 Fragment、Teleport 和 Suspense，增加了开发灵活性。

4. 更好的 TypeScript 支持：适合大型应用开发，提供更强的类型检查。

5. 树摇优化：减少了生产环境的打包体积。

Vue 3 的这些更新使其成为一个适合现代 Web 开发的高效框架。

整体架构流程

前期准备

1. 环境准备：

   • 确保你的开发环境中安装了Node.js和npm或yarn等包管理器。
   • 安装Vue CLI，这是一个Vue项目脚手架工具，可以快速生成项目基础结构。

2. 创建项目：

   • 使用Vue CLI创建新项目，可以通过命令行选择预设或手动选择特性。
   • 或者使用Vite作为更现代的前端构建工具，它提供了更快的启动速度和热模块替换。

3. 项目结构：

   • 理解Vue项目的基本结构，包括src、public、node_modules等目录。
   • src目录通常包含components、views、router、store等子目录。

4. 依赖安装：

   • 安装项目所需的依赖，如Vue Router用于路由管理，Vuex或Pinia用于状态管理。
   • 安装UI框架（如Element Plus、Vuetify等）和其他工具库。

项目案例

1.如何把html页面改写到vue项目中

创建Vue组件

对于HTML页面中的每个主要部分，你都可以创建一个Vue组件。代码中有一个头部、一个主体和一个底部，你可以创建三个组件：App.vue、home.vue和login.vue

        在Vue项目中，views文件夹通常用于存放视图文件。这些视图文件代表了项目中的不同页面或屏幕。每个视图文件都是一个Vue组件，它们定义了页面的结构、样式和行为。   

安装配置vue环境：

1.下载安装node.js https://nodejs.org/en/download/

2.安装vue及脚手架 npm install vue -g或者cnpm install vue -g

3.安装webpack模板 npm install webpack –g

4.安装脚手架vue-cli npm install vue-cli -g

2.引入element-plus

以下是如何在Vue 3项目中全局引入Element Plus的步骤：

1.在Vue项目中全局引入Element Plus通常意味着你希望在整个应用中使用Element Plus的组件，而不需要在每个组件中单独引入。

全局引入通常是在项目的入口文件（如main.js或main.ts）中完成的。

2.使用npm安装：

3.使用组件进行登录注册过程，修改和添加元素，在网页中显示相关样式

3.v-model双向数据绑定

        v-model 是 Vue.js 中用于实现表单元素和 Vue 实例数据之间的双向数据绑定的指令。它确保了输入或选择框的值与 Vue 实例的数据保持同步

        通过 Vue 的 v-model 指令实现了数据的双向绑定。用户输入的内容会实时更新到 Vue 实例的 loginForm 对象中，同时如果 loginForm 对象中的数据发生变化，输入框的内容也会相应更新。

4.表单验证

表单验证所需事件:

1、所用到的三个事件：onfocus（焦点聚焦事件）、onblur（焦点离开事件）、onclick点击事件）。
2、利用事件触发函数，函数中执行校验的信息。
3、使用butten按钮提交事件

1.设置验证方法和绑定方法，要求密码长度和表单数据绑定。

2.双向绑定和错误信息提示

        rules 对象中定义了三个字段的验证规则：username、password 和 confirmPassword。每个字段的验证规则都是一个数组，数组中的每个元素都是一个验证对象，包含 required、message、trigger 以及可能的 min 和 max 属性。

        这些属性用于指定字段是否必填、验证失败时的提示信息、触发验证的事件以及验证字段长度的范围。

小结

Vue 3 在性能上相比 Vue 2 有以下几个具体的提升：

• 更小的打包体积：Vue 3 的核心库被重写为更小的、可按需加载的内部模块，这使得通过 tree-shaking 可以减少高达 41% 的打包体积。

• 新的 v-memo 指令：Vue 3.2 引入了 v-memo 指令，它允许开发者记忆模板树的一部分，这样可以跳过虚拟 DOM 的 diff 过程，甚至不需要创建新的 VNodes，从而在某些场景下（如大型 v-for 列表）实现最大性能提升。

• 更好的 TypeScript 集成：Vue 3 的代码库使用 TypeScript 编写，自动生成的类型定义始终保持最新，并且 Composition API 与类型推断协同工作得很好。

参考文章

《vue3实战！登录注册前端》（链接： https://www.bilibili.com/video/BV17d4y1D73W/?share_source=copy_web&vd_source=fc6bbd1d3a8d940c2c204ea179ccba05，作者：小河酱呀）

图片：来自bilibili