作为一个Java重度使用患者，后端程序员掌握一些前端知识是必备技能。Html、CSS、JS三大语言后端玩起来也得是溜得很，不过现在前端技术发展的速度简直做上了飞机，后端程序员自己首先要保障后端技术不被拉下，再想回头学学前端技术，没想到那趟飞机已经上天了。
不得不说后端程序员普遍使用的ui界面都是比较丑，再看看现在各种前端页面靓的一匹。现阶段流行的UI框架典型的比如饿了么的Element、阿里的Ant Design等等。
这些框架对于后端程序员使用话说不怎么友好，官方推荐安装
Node.JS使用npm install安装，之后使用run dev运行。wtf咱们习惯了传统方式html页面直接引入CSS、JS就能看效果了，我就简单的想看个页面还得占用个端口号，有些大动干戈了。并且在企业开发过程中因为想使用一些组件就创建一个前端工程有些不实际，至此今天带大家直接使用传统后端程序搭建使用Element组件的环境，不安装Node.JS也能让一个老后端也尝尝Element的香。
想要使用Element组件Vue是必备，默认你已经掌握Vuel
创建文件夹其中添加css和js、再新建一个html文件，结构如下。
Element官网没有推荐的下载包，最方便的引入是直接通过官网的CDN下载，如果项目里使用CND的话这样入库就可以了。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- Vue库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
推荐将上面3个文件下载到本地使用本地文件存储，如果下载文件的方式，还需要再单独引入一个Element的图标样式库，下面是图标库地址。
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff">
下载到本地方法：
引入后的文件目录如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<script src="./js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./js/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
ok至此放入传统页面里开心的运行吧。
（用心写好每一行程序和文字：完~）