饿了么UI库--Vue开发必备神器--让你轻松设计出好看的页面

作者：Gausst松鼠会 | 2024-03-01 12:30:42

踩

饿了么ui

本篇文章有两种方案让你使用Element-UI

网站快速成型工具
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

这篇文章的作用就是让自学的小伙伴们，少费点时间，把时间用在学习新的知识上。为什么这么说呢？在使用饿了么UI库时，有不少的坑的。

1.CDN使用 — 推荐刚学完vue基本知识的小伙伴

看 Element-UI 官网的介绍使用CDN引入会有坑的。看着是不是好简单，直接复制粘贴引入到html文件中就可以使用了？？？

在这里插入图片描述

还有关键的一个步骤的。需要引入vue文件才可以的。这里还是有坑的。
引入的vue文件，必须要在组件库文件的上面（必须），不然还是报错。

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入vue -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
1
2
3
4
5
6

展示下饿了么UI库的魅力（我只展示了Button 按钮和Rate 评分）
全部代码展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入vue 第二个是引入的node_modules中的vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    <!-- <script src="./element-ui-test/node_modules/vue/dist/vue.js"></script> -->
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-rate v-model="value" show-text> </el-rate>
      <br><br>
      <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
      </el-row>
      <br><br>
      <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
      </el-row>
    </div>
  </body>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        value: null,
      },
    })
  </script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

2.npm安装 — 推荐学习完vue-cli的小伙伴们

首先要vue create [项目名称]就是先要初始化一个vue项目。
其次要安装npm i element-ui -S
完整安装,在main.js文件中加入以下代码（其实就两个import导入）

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
11

按需引入，主要作用就是可以优化性能，需要借助babel-plugin-component。安装命令是：npm install babel-plugin-component -D
之后在main.js中加入下面代码（小伙伴们自己看着改哈）

import Vue from 'vue';
import { Button, Select } from 'element-ui';
// 样式文件不可以少
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

上面两个方式认选一个，学习推荐使用第一种，工作推荐使用第二种。
最后开始在App.vue组件中使用就可以了。我复制个代码，以便于好理解
下面代码需要完整安装才可以，按需引入需要在main.js文件中import { Button, Select, Carousel, CarouselItem } from 'element-ui';中引入Carousel, CarouselItem这两个组件。并且在下面加上Vue.use(Carousel); Vue.use(CarouselItem);这两行代码才可以实现下面展示的效果

<template>
  <div id="app">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "App"
</script>

<style lang="less">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

效果图

3.最后，可以去 Element-UI 官网查看更多的小组件

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/173974