基于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 以对象为索引的关联数组
May 19 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
node.js入门学习之url模块
Feb 25 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
javascript实现智能手环时间显示
Sep 18 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设计模式之状态模式定义与用法详解
2018/04/02 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
限制文本字节数js代码
2007/03/06 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
JavaScript 巧学巧用
2017/05/23 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python中GIL的使用详解
2018/10/03 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
python实现从ftp服务器下载文件
2020/03/03 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
工程造价自荐信
2013/10/09 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
客户表扬信范文
2014/01/10 职场文书
大气污染防治方案
2014/05/19 职场文书
机电系毕业生求职信
2014/07/11 职场文书
社会发展项目建议书
2014/08/25 职场文书
2014年行政工作总结
2014/11/19 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python