基于vue-cli3和element实现登陆页面


Posted in Javascript onNovember 13, 2019

1.先用vue-cli3创建一个项目

2.安装element模块

全局安装

 npm i element-ui -S

3在main.js引入模块

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

4.这里先扩展一个小知识点

在package.json文件中找scripts下serve,在后面加上--open 可以实现运行项目后自动打开浏览器

基于vue-cli3和element实现登陆页面

5.然后我们在views文件夹下新建一个登陆页面login.vue

6.搭建login页面(这里我们简单的用element修饰一下)

<template>
 <div class="firstdemo">
 <el-form ref="form" :model="form" label-width="80px">
 <el-row type="flex" justify="center">
 <el-col :span="5">
  <el-form-item label="用户名">
  <el-input v-model="form.name"></el-input>
  </el-form-item>
 </el-col>
 </el-row>
 <el-row type="flex" justify="center">
 <el-col :span="5">
  <el-form-item label="密码">
  <el-input v-model="form.password"></el-input>
  </el-form-item>
 </el-col>
 </el-row>

 <el-row type="flex" justify="center">
 <el-col :span="5">
  <el-form-item>
  <el-button type="primary" @click="onSubmit">登陆</el-button>
  <el-button>注册</el-button>
  </el-form-item>
 </el-col>
 </el-row>
 </el-form>
 </div>
</template>
<script>
export default {
 name: "fisrtdemo",
 data() {
 return {
 form: {
 name: "",
 password: ""
 }
 };
 },
 methods: {
 onSubmit() {
 if (this.form.name == "admin" && this.form.password == "123456") {
 this.$message({
  message: '登陆成功',
  type: 'success'
 }); 
 this.$router.push({ path: "/Home" });
 }else{
  this.$message.error('登陆失败');
 }
 }
 }
};
</script>
<style lang="stylus" scoped></style>

由于只是简单的展示以下 这里我们用一个死数据

 这里简单强调一下在逻辑层实现路由切换

<!-- router.push({path:'/foo'}) -->

 <!-- 声明式导航 应用于视图层 -->
 <router-link to='/foo'>to foo</router-link>
 <router-view></router-view>
 <!-- 编程式导航 应用于逻辑层-->
 <!-- router.push({path:'/foo'}) -->

到这里login页面基本搭建完成

7.在router下的index.js中引入我们刚刚创建的login.vue

并对路径作相应改动

index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import login from "../views/login.vue";
Vue.use(VueRouter);

const routes = [
 {
 path: "/",
 name: "login",
 component: login
 },
 {
 path: "/Home",
 name: "home",
 component: Home
 },
 {
 path: "/about",
 name: "about",
 // route level code-splitting
 // this generates a separate chunk (about.[hash].js) for this route
 // which is lazy-loaded when the route is visited.
 component: () =>
 import(/* webpackChunkName: "about" */ "../views/About.vue")
 }
];

const router = new VueRouter({
 mode: "history",
 base: process.env.BASE_URL,
 routes
});

export default router;

8.最后我们对home作一下简单修饰。

博主这里在components中新建了一个组件helloworld并引入了element中的一个简单的布局容器。

然后在home页面引入helloworld对页面进行渲染(当然也可以像上面一样直接在home中引入element布局容器)

9.运行 npm run serve

10.下面展示以下效果

 

基于vue-cli3和element实现登陆页面

基于vue-cli3和element实现登陆页面

基于vue-cli3和element实现登陆页面

总结

以上所述是小编给大家介绍的基于vue-cli3和element实现登陆页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
vue data引入本地图片的两种方式小结
Nov 13 #Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 #Javascript
解决vue v-for src 图片路径问题 404
Nov 12 #Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 #Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 #Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 #Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 #Javascript
You might like
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php全角字符转换为半角函数
2014/02/07 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python中six模块基础用法
2019/12/08 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
超市促销活动方案
2014/03/05 职场文书
人事专员岗位职责
2015/02/03 职场文书
毕业生党员个人总结
2015/02/14 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技