Vue2 实战基于 Elmenet-UI 的单页面开发用户信息增删改查 | 支持分页查询

这篇具有很好参考价值的文章主要介绍了Vue2 实战基于 Elmenet-UI 的单页面开发用户信息增删改查 | 支持分页查询 | 自动登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

案例介绍

为了熟悉 Vue2 框架的使用，现采用 Vue2的基础知识、Router路由、Vuex 管理仓库来实现一个可对用户进行增删改查的小案例。数据存储在浏览器的 localStorage 本地缓存中，方便模拟从后端获取数据，不过这里仅有前端部分，没有涉及 axios 请求相关的内容。
技术栈：Vue2 + ElementUI + Vue Router + Vuex
【注：本案例只是作为初学者的分享，里面的设计思路不一定适合特定场景，可能存在许多不足，仅供参考】

案例地址：https://gitee.com/ccuni/vue-easy-user-crud

一、相关知识

1.1 Vue

Vue 是国人大牛【尤雨溪】开发的一套用于构建用户界面的开源的渐进式框架，支持 MVVM架构，具有易用、灵活和高效的特点，是前端领域比较火热的框架，不过目前最流行的前端框架还是 React，React框架在国外使用量最多，这里简单提一下。
目前 Vue2 是大多数使用企业中的主流版本（据说），而 Vue3 带来了更高性能，增加了一些新特性，在这里我以Vue 2 为主，先掌握 Vue2 的使用，之后有时间再继续学习 Vue3。

1.2 Vue-Router

Vue-Router 是 Vue官方提供的路由插件。
使用 Vue 开发的 Web 项目支持 SPA 页面的渲染，即 Single Page Web Application，单页面的web应用。
单页面可以提升页面切换速度，每次切换都是局部加载页面，提升网站的响应速度，减少服务器压力，支持组件化构建。
而 Vue-Router 简单来说就是支持我们定义不同的 URL 请求地址，跳转到不同的路由组件，在本次案例中，我没有使用到路由守卫、元数据等内容，只是简单的配置了一下页面和路由组件的映射，适合初学者入门。

1.3 Vuex

Vuex 也是 Vue官方提供的插件，采用集中式存储管理应用的所有组件的状态，主要分为三层，分别是 action 响应层，mutations 数据处理层，store 存储层。
对于这三层，我们可以类比 MVC架构里的 Controller、Service和 DAO，但是这里是有区别的，可以从 mutations 直接到 store，而不经过 action。
在本次案例中，我使用 Vuex 来保存处理用户信息的所有业务代码，这样其他的所有路由组件都可以调用，可有效的降低代码耦合度，而用户的信息也存储在了 Vuex 的 store 层，方便任意组件获取数据。
Vue2 实战基于 Elmenet-UI 的单页面开发用户信息增删改查 | 支持分页查询 | 自动登录

1.4 VueCLI

Vue CLI 又称脚手架，是搭建 Vue项目的工具，在我们做 Vue 项目的开发时，不可能每次都从零开始创建项目文件，这样效率是比较低的，而官方提供的基于 Node.js 的脚手架可以很好的解决这个问题，我本次的案例是基于脚手架开发的，其中有许多文件都是默认生成的，不用自己手动去配置，降低了开发难度。

1.5 Element-UI

Element 是国内【饿了么】开发团队为开发者、设计师和产品经历准备的基于 Vue 的开源的桌面端组件库，有支持 Vue2的版本，同时也有支持 Vue3 的对应版本，用了这个神奇的框架，我们可以快速搭建前端页面，实现想要的效果，除此之外，该框架提供了一系列基于 Vue 实现的功能，大大降低了开发难度。