传统html+vue+elementUI开发（基本没人这么干），这里只是用这种方式带大家Element-UI入个门

ElementUI简介

   我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,

   所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

   ElementUI官网：http://element-cn.eleme.io/#/zh-CN

   注1：类似前端框架还有iview

## demo1.html(非模块化)

## hello elementUI

2. Vue+ElementUI安装

  2.1 CDN方式

      <!-- 1. 导入css -->

      <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">

      <!-- 2. 引入vue和vue-router-->

      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

      <!-- 未使用vue路由功能可不导入 -->

      <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>

      <!-- 3. 引入ElementUI组件 -->

      <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

核心代码

var vm = new Vue({
			el: "#app",
			data: function() {
				return {
					ts: new Date().getTime()
				}
			},
			methods: {
				doClick: function() {
					console.log('doClick');
					this.$alert('这是一段内容', '标题名称', {
						confirmButtonText: '确定',
						callback: action => {
							this.$message({
								type: 'info',
								message: `action: ${ action }`
							});
						}
					});
				}
			}
		});

demo5.html 

最终效果

over......