入坑Vue(四) 引用element ui组件,配置登录
NPM安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
执行命令安装npm i element-ui -S
element ui 官网文档:https://element.eleme.io/#/zh-CN/component/installation
mian.js中 完整引入
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);
登录代码:Login.vue
class="login-body">particles class="login-bg" color="#39AFFD" :particleOpacity="0.7" :particlesNumber="100" shapeType="circle" :particleSize="4" linesColor="#8DD1FE" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" > class="login-container">"ruleForm2" :rules="rules2" status-icon ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-page"> class="title">后台管理系统
"username"> "text" v-model="ruleForm2.username" auto-complete="off" placeholder="用户名" > "password"> "password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码" > checkbox v-model="checked" class="rememberme" >记住密码 "width:100%;"> "primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录
注意替换背景图片
我这用的是iview 登录背景图
界面效果如下