目录

 

前言

一、安装（所有内容）

二、按需引入

三、案例演示

1.案前整理

2.代码演示（后附源码） 

3.源码

前言

Element-ui，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

一、安装（所有内容）

npm i element-ui -S   终端安装

在main.js中引入，此方法引入了所有功能，会导致项目文件较大，推荐按需引入，需要什么引入什么

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

二、按需引入

npm i element-ui -S 终端安装

npm install babel-plugin-component -D  安装 开发依赖

修改babel.config.js

module.exports = {

  presets: [

    '@vue/app',

["@babel/preset-env", { "modules": false }]

  ],

   plugins: [

      [

        "component",

        {

          "libraryName": "element-ui",

          "styleLibraryName": "theme-chalk"

        }

      ]

    ]

}

新创一个专属的引入文件夹与src同级，引入想要引入的内容

import Vue from 'vue'

import {Button,Form,FormItem,Input,Col,Row,Message} from 'element-ui';

Vue.use(Button)

Vue.use(Form)

Vue.use(FormItem)

Vue.use(Input)

Vue.use(Col)

Vue.use(Row)

// 弹出框挂载到vue原型身上，这样每个组件都是用this.message

Vue.prototype.$message = Message

main.js引入文件夹路径，这里拿我的为例

import '@/plugins/element'

三、案例演示

1.案前整理

提前准备了图片，样式，来配合实现一个较为美观的登录框，如果需要源码样式，私信留下邮箱免费领取，看见就回

这里我还使用了简单的路由效果，来展现跳转页面，下面展示基础的效果

2.代码演示（后附源码） 

首先我们需要创建一个路由组件，将内容样式导入，这里直接跳过，样式代码后附，我们直接看如何引入element的代码

虽然官网已经有了演示代码，但是我们要简单了解一下，每一步的意义

如上的演示，我们很清楚需要利用的是input、button这种表单的样式，所以需要使用到 按钮是为了最后判断是否满足后台数据（此案例没有），也可以一起判断是否满足所有的规则，需要使用点击事件触发绑定@click

第一步在新的组件中写入以下代码，也可以说是路由组件

如上图在v-from中使用到了:model :rules来绑定，我需要在data中写入对应的绑定内容

 登录按钮判断是否全都满足

 在父组件APP中我们需要写入路由、占位符、给router-link绑定了v-show是为了让点击登录，登录按钮就会消失，其中也使用了element自带的美化按钮，直接使用，前提都是自定义安装中要有

router代码中注册

3.源码

APP.vue代码

 路由组件代码

router代码

routes:[

// 注册组件

// {path:'/',redirect:'/login'},

{name:'login',path:'/login',component:Login}

]

})

assets css代码引入到app.vue中

html,body,div,ul,p{

margin: 0;

padding: 0;

}

html,body,#app{

height: 100%;

}

.l{

float: left;

}

.r{

float: right;

}

.c{clear: both;}

两张图片也放在assets使用时引入，如下点击自取图片

背景图片

登录图片

结束语：分享到此就结束啦，有问题随时私聊

参考文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：