本篇文章有两种方案让你使用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>

展示下饿了么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>

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>

效果图

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

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

如何设计出好看的UI界面
设计出好看的 UI 界面需要注意以下几点: 要注意界面的布局和视觉效果,保证界面的美观性和吸引力. 要注意界面的可用性,保证用户能够轻松地使用界面,操作界面的功能. 要注意界面的一致性,保证界面中的各 ...
vue rem适配_vue如何使用UI库快速开发项目
☝点击蓝色字体关注,轻松获取最新推送前言项目开发中,不是所有的项目都可以让你排期.估时.有些项目可能今天才确认了需求,明天就让你出一版进行测试怎么办? 我们可以使用UI库帮助我们快速进行项目开发 ...
推荐几个Vue开发必备插件，要收藏
「介绍用途」大家知道,Vue2.x之后,Vuex状态管理是必须要掌握的一个技术点,今天北妈先介绍下Vuex是什么,然后在介绍几个封装好的操作本地缓存.状态的几个组件,需要的童鞋赶紧拿走,可能有很 ...
用vue开发一个公众号商城SPA——1.前期准备和写页面
使用vue开发公众号商城第1篇记录项目准备.搭建,写页面遇到第问题以及总结,持续更新公司最近接了个商城项目,包括PC端商城.微信公众号网页商城.后台管理系统.这几天在做微信公众号商城,又新接触了很 ...
世纪前线网络质量测试工具是什么_HTTP API测试工具大全，后端开发必备神器。...
API测试的主要任务是看被开发的应用程序接口,是否符合期望,能否可靠的服务,能否提供API所预定的功能,然后就是测试性能如何,接口的安全性如何. 接下来我们就来看看,目前最流行的测试应用程序接口的工具 ...
vue饿了么UI库-笔记
1. :rules="{required: true, message: '有效期不能为空'}" :rules="{type:'date',required: true, ...
android crash没有日志_Android开发必备神器CrashCanary
阅读本文大概需要8分钟作者:wangsj1992出处:https://www.jianshu.com/p/8676f7a05920 前言安卓开发中,你是否遇到过如下困扰: 场景一开发好一个功能后 ...
Git--团队开发必备神器
花了两天时间专门搞了一下git.整理一下分享给大家.以下我们開始.. . 转载请注明出处: http://blog.csdn.net/Hello_Chillax/article/details/474 ...
【进阶篇】Vue Devtools——vue开发调试神器
工欲善其事,必先利其器,vue2.0进阶系列的知识更接近我们的实际开发所需,在开发过程中,有个好的调试工具是事半功倍的,Vue Devtools就是我们选择的调试工具,它是一款chrome浏览器的插件 ...
vue 手机端答题页面_从0开始，手把手教你用Vue开发一个答题App01之项目创建及答题设置页面开发...
项目演示项目源码配套讲解视频教程说明本教程适合对Vue基础知识有一点了解,但不懂得综合运用,还未曾使用Vue从头开发过一个小型App的读者.本教程不对所有的Vue知识点进行讲解,而是手把手一步 ...

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

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

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

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

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

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

最新文章

热门文章