背景
作为一名后端菜鸟,之前工作中因为有前端人员,开发过程中并未接触过前端的技术,一直在做后端的开发,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升职加薪,前程似锦,早日实现财富自由