基于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 相关文章推荐
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
Python封装shell命令实例分析
2015/05/05 Python
python统计日志ip访问数的方法
2015/07/06 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
python如何实现内容写在图片上
2018/03/23 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python爬虫之遍历单个域名
2019/11/20 Python
Django如何使用redis作为缓存
2020/05/21 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
什么样的创业计划书可行性高?
2014/02/01 职场文书
入党自荐书范文
2014/03/09 职场文书
同学聚会主持词
2014/03/18 职场文书
骨干教师申报材料
2014/12/17 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
python中的装饰器该如何使用
2021/06/18 Python