vue+element-ui实现demo

本文介绍了如何利用Element-UI,一个由饿了么团队开发的Vue.js 2.0组件库,来创建桌面应用。文章详细阐述了从理解element-ui,到准备、安装、使用组件,最后实现demo的全过程。
摘要由CSDN通过智能技术生成

1、什么是element-ui

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

2、使用前的准备

1、安装webpack           命令:cnpm install webpack -g
2、安装vue/vue-cli 		命令cnpm install vue vue-cli -g
3、初始化vue		 命令vue init webpack + 项目名称

4、安装项目依赖      命令npm install 
4、在项目目录文件夹下运行 cnpm run dev ,如果没有问题,就可以进行安装ElementUI

上述步骤都完成之后便可开始安装并使用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)

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="text" @click&#
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值