「2022 年什么会火？什么该学？本文正在参与“聊聊 2022 技术趋势”征文活动 」

背景

作为一名后端菜鸟，之前工作中因为有前端人员，开发过程中并未接触过前端的技术，一直在做后端的开发，21年底跳槽更换了一份新的工作,因为工作原因，前后端都需要做，开始接触前端相关框架，因为新项目周期性较长，独立设计和开发，自身也是希望能够学习下vue开发，所以新项目的前端技术选型采用了比较受欢迎的前端 UI 框架：VUE+ElementUI。

ElementUI介绍 以及它的优点

简介

Element UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端元组件库，由饿了么前端团队推出。它并不依赖于Vue，却是一个十分适合Vue项目的框架。可使用Element UI轻松制作出网页，为前端开发人员大大减轻了代码负担。

优点

1.快速搭建，vue官网提供的脚手架，使用 vue-admin-template ，在此基础上开发，而且github上配有详细的模板说明，这样可以节省开发时间

2.工程结构明了，便于编写及理解

3.element所有的组件都存在于其官网上，找到所需要的组件，复制其代码，拷贝到项目的位置上即可使用 ，页面简洁，方便上手。

4.节约成本，开发的项目大部分是管理系统，大多数使用到的组件都能在这官方文档中找到，节省很多写样式的时间

搭建环境

创建项目

前往node官网下载最新版本的node，根据自己的操作系统选择相应的包，按照步骤一步步走就可以，这里不做过多介绍。

安装好后可以打开命令行用 npm-v node-v 查看是否安装成功以及版本号

如果以前已经安装过node 和 npm 最好升级到最新版本，命令行 npm install npm@x.xx.x

首先全局安装vue-cli,打开CMD命令行，npm install -g vue-cli

接下来新建项目，运行 vue init webpack demo 这里的demo是你项目的名字，接下来会有一些初始化的设置，其中vue-router是路由，反正我都会选择安装，其他的可以回车跳过或者选择no

---按照提示，cd到新建的项目下，运行npm install

---运行npm run dev

安装Element

cd到当前项目 运行 npm i element-ui -S

接下来就是在项目里面引用了，打开src目录下的main.js

下面我们就可以愉快的使用element里面优雅的组件了，这个是element的网址element.eleme.io/#/zh-CN/com…

结束

其实任何一门语言都有他的独到之处，根据自身情况，选择一种适合自己的编程语言,虽然在学习写前端代码，但我主要的还是java，希望2022能把VUE+ElementUi框架使用熟练

祝大家2022升职加薪，前程似锦，早日实现财富自由