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

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

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

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

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

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

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

  • 还有关键的一个步骤的。需要引入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>
  • 展示下饿了么UI库的魅力(我只展示了Button 按钮和Rate 评分)
    饿了么UI库--Vue开发必备神器--让你轻松设计出好看的页面_第2张图片
  • 全部代码展示
<!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>

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)
});
  • 按需引入,主要作用就是可以优化性能,需要借助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)
});
  • 上面两个方式认选一个,学习推荐使用第一种,工作推荐使用第二种。
  • 最后开始在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>

  • 效果图
    饿了么UI库--Vue开发必备神器--让你轻松设计出好看的页面_第3张图片

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

你可能感兴趣的:(饿了么UI库--Vue开发必备神器--让你轻松设计出好看的页面)