饿了么（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
  直接  回车

注意：

1. vue create 命令会自动创建文件夹，这样就不需要我们手动创建了

2. 选择Vue2 版本的默认配置

3. 如果vue create 命令不能正常运行，要先安装脚手架工具， 对应的命令是： npm i -g @vue/cli

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

把ElementUI添加到项目中

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

1. 安装elementUI 命令：npm i element-ui -S

2. 在项目的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组件-自定义列-显示图片

把图片显示在表格中：

pagination-翻页组件

• layout中的关键字有自己的含义；

• total用来设置数据的总条数

• ---

  Tree树形组件

• Tree组件的基础使用

• 举个例子：

  效果如下：

• 

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