饿了么（elementUI）组件库如何在vue项目中使用？

官方组件库地址：Element - The world's most popular Vue UI frameworkhttps://element.eleme.cn/#/zh-CN

elementui是做PC项目的首选

创建项目并引入element组件库

用vue-cli脚手架创建vue项目

找一个合适的文件夹，打开cmd窗口，用vue create 创建项目

命令：vue create 自定项目名

vue create element-demo
-------------------------------
? Please pick a preset:
> Default ([Vue 2] babel, eslint)Default (Vue 3 Preview) ([Vue 3] babel, eslint)Manually select features直接  回车

注意：

vue create 命令会自动创建文件夹，这样就不需要我们手动创建了
选择Vue2 版本的默认配置
如果vue create 命令不能正常运行，要先安装脚手架工具，对应的命令是： npm i -g @vue/cli

然后运行vue项目：命令： npm run serve 输入http://localhost:8080 查看

把ElementUI添加到项目中

参考官网文档，按全局引入的方式，一共分成两步：

安装elementUI 命令：npm i element-ui -S
在项目的main.js中引入使用
```
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
上面的写法是固定模式，可随时去官网查看。

使用elementUI组件

在官网文档中查看使用步骤 cv即可

举个简单的例子：我们用一个 button按钮的组件

如果我们想用这个第一排的这些button按钮，只需要cv

在举一个例子：当我们想要那种进度条的组件可以在elementUI官网里面找如下:

作用域插槽的使用方法

1. slot-scope是固定写法
2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法
3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中

table组件-自定义列-显示图片

把图片显示在表格中：

<template><div><el-table :data="tableData"><el-table-columnlabel="公司名"prop="companyName"></el-table-column><el-table-columnlabel="公司logo"prop="companyLogo"></el-table-column><el-table-columnlabel="公司logo"><!-- slot-scope: 是老语法，v-slot ：是新语法。效果一样--><template slot-scope="scope"><!-- {{scope.row.companyLogo}} --><img :src="scope.row.companyLogo"/></template></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{companyName: '小米',companyLogo: "http://s02.mifile.cn/assets/static/image/logo-mi2.png"}, {companyName: '京东',companyLogo:"https://misc.360buyimg.com/lib/img/e/logo-201305-b.png"}, {companyName: '百度',companyLogo:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"}]}}
}
</script>

pagination-翻页组件

<!--按钮顺序： layout="prev（上一个）, pager（中间）, next（下一个）" --><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>

layout中的关键字有自己的含义；
total用来设置数据的总条数
Tree树形组件
Tree组件的基础使用

举个例子：

<template><div><h1>tree树形控件</h1><el-tree:data="data":props="defaultProps"@node-click="handleNodeClick"></el-tree></div>
</template><script>
export default {data() {return {data: [{label: "项目经理 张大大",children: [{label: "产品小亮",children: [{label: "小丽",},{label: "大光",},],},{label: "UI小美",children: [{label: "小高",},],},{label: "前后端老马",children: [{label: "小刘",},{label: "小华",},{label: "小李",},],},{label: "测试-老王",children: [{label: "小赵",},{label: "小强",},],},{label: "运维老李",children: [{label: "小涛",},],},],},],defaultProps: {children: "children",label: "label",},};},methods: {handleNodeClick(data) {console.log(data);},},
};
</script><style>
</style>

效果如下：

小伙伴，如果有什么不懂的，都可以在官网文档找到结局方案，或者像我提问。

饿了么（elementUI）组件库如何在vue项目中使用？相关推荐

如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...
如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
如何在vue项目中修改less变量，多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...
如何在vue项目中使用lodop打印插件
如何在vue项目中使用lodop打印插件 - 简书先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...
vux 显示 html,如何在vue项目中使用vux
编者:只需6步,教你如何在vue项目中使用vux, 1.在项目里安装vuxnpm install vux --save2.安装vux-loader (这个vux文档中没有明文跟你说要安装的啦) np ...
详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库: https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体 ...
如何在Vue项目中应用TypeScript？
一.前言在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, # npm 下载 npm i vue-property-decorator -s # ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...