vue+element-ui实现demo_element ui demo

1、什么是element-ui

element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库，而手机端有对应框架是 Mint UI 。整个ui风格简约，很实用，同时也极大的提高了开发者的效率，是一个非常受欢迎的组件库。

2、使用前的准备

1、安装webpack         　 命令：cnpm install webpack -g
1

2、安装vue/vue-cli 		命令cnpm install vue vue-cli -g
1

3、初始化vue		　命令vue init webpack + 项目名称
1

4、安装项目依赖      命令npm install 
1
2

4、在项目目录文件夹下运行 cnpm run dev ，如果没有问题，就可以进行安装ElementUI
1

上述步骤都完成之后便可开始安装并使用element-ui了

3、安装element-ui

1.cd:进入创建好的项目名称
2.运行安装命令：npm i element-ui -S
（注意 i 是install的简写 如运作报错可尝试使用npm install element-ui -S）
3.导入相关依赖

// 导入组件库
import ElementUI from "element-ui"
// 导入样式
import "element-ui/lib/theme-chalk/index.css"
// 注册为全局组件
Vue.use(ElementUI)
1
2
3
4
5
6

4、使用 element-ui 提供的组件

上述步骤完成后可直接去element-ui官网复制想要使用的组件代码

5、实现demo

1.在src.components文件夹下创建Pop.vue文件
在element-ui官网中找到弹出组件的代码复制粘贴：

<template>
  <div>
      <!-- 
        常用弹出组件：
            el-dialog
            el-popover
        sync修饰符在作用,sync:其实是一种语法塘：
            示例：ElementUI中的el-dialog
            第一种写法：<el-dialog：visible.sync="dialogVisible"
                这种写法是:关闭或是点击空白处无需特别处理，el-dialog组件内部会修改当前值状态，通过.sync修饰符传递给父组件；

            第二种写法：<el-dialog:visible="dialogVisible" :before-close="beforeClose"
                这种写法需要再beforeClose方法内手动处理：this.dialogVisible = false
          
      两种：第一种绑定属性。v-bind:title="doc.title" 
        第二种：它监听了一个跟新事件：v-on:update:title="doc.title=Sevent"
        我们知道propo当中的数据一般都是单向绑定的，也就是说父组件传给子组件的数据，父组件可以随便更改，子组件不能更改父组件当中的数据
      -->
    <h1>this is Pop</h1>
    <el-button type=
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19