基于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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 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
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php安装swoole扩展的方法
2015/03/19 PHP
8个PHP数组面试题
2015/06/23 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
php测试kafka项目示例
2020/02/06 PHP
js中的push和join方法使用介绍
2013/10/08 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
js格式化时间的方法
2015/12/18 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python列表切片用法示例
2017/04/19 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
外企C语言笔试题
2013/11/10 面试题
私有程序集与共享程序集有什么区别
2013/04/05 面试题
Servlet的生命周期
2013/08/25 面试题
关于是否需要写商业计划书
2014/02/07 职场文书
超市商业计划书
2014/05/04 职场文书
财会专业大学生求职信
2014/09/26 职场文书
2015大学生实训报告
2014/11/05 职场文书
责任书范本大全
2015/05/11 职场文书
安全学习心得体会范文
2016/01/18 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL