本篇文章有两种方案让你使用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 官网查看更多的小组件

# 前端 # vue.js # npm
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign