新建一个Login.vue（登录页面，先把Hello.vue的内容复制过来即可）

然后我们打开router下面的index.js,第一个箭头:（引入vue路由）第二个箭头（引入我们新建的Login.vue页面）第三个箭头（我们要使用这个路由）第四个箭头（配置路由,path表示在浏览器中输入的路由名称）

然后我们在浏览器中输入这个login页面的地址，就会出来内容了，这样一个简单的页面就建成了

因为我们要使用semantic-ui，所以我们安装一下semantic-ui,进入到命令行界面输入npm install semantic-ui,等待安装完成即可

安装完成以后我们需要在main.js里面引入一下，这样我们就可以使用semantic-ui了

然后我们修改一下login.vue，用semantic搞一个简单的登录页面v-model就是标识这个输入框，v-on:click="doLogin"就是代表点击事件

页面就变成了下面这个样子

vue_cli下开发一个简单的模块权限系统之建立登录页面并且实现在浏览器输入地址出现内容的更多相关文章

  1. vue_cli下开发一个简单的模块权限系统之实现登录

    因为我们需要和后端数据交互,所以我们需要安装axios,安装好以后在main.js引入 v-model是标识空间,v-on:click="doLogin"是登录事件 doLogin ...

  2. vue_cli下开发一个简单的模块权限系统之展现数据

    这个页面是用户列表:userList就是第二张截图中的data里面的userList vue中只要改变存放数据的载体就会实现页面改变,mounted的意思是页面加载时执行这里面的函数,我们需要在页面加 ...

  3. 【7】用Laravel5.1开发一个简单的博客系统

    声明: 本教程参考Jeffrey way 在laracasts.com上的视频教程,感谢Jeffrey way为大家带来的精彩教程,本教程如有侵权,请及时告知,联系邮箱wanglv93@gmail.c ...

  4. PHP开发一个简单的成绩录入系统

    预览界面 源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  5. Python开发一个简单的BBS论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  6. 【Nginx】开发一个HTTP过滤模块

    与HTTP处理模块不同.HTTP过滤模块的工作是对发送给用户的HTTP响应做一些加工. server返回的一个响应能够被随意多个HTTP过滤模块以流水线的方式依次处理.HTTP响应分为头部和包体,ng ...

  7. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  8. 重新想象 Windows 8 Store Apps (64) - 后台任务: 开发一个简单的后台任务

    [源码下载] 重新想象 Windows 8 Store Apps (64) - 后台任务: 开发一个简单的后台任务 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 后 ...

  9. Cocos2d-x-Lua 开发一个简单的游戏（记数字步进白色块状）

    Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...

随机推荐

  1. install 命令

    install命令的作用是安装或升级软件或备份数据,它的使用权限是所有用户.install命令和cp命令类似,都可以将文件/目录拷贝到指定的地点.但是,install允许你控制目标文件的属性.inst ...

  2. Druid 0.2.25版本hive jdbc 不支持 conn.getHoldability() 兼容处理问题

    背景: 用Druid做Oracle的连接池感觉还不错,近日新项目要用Hive,故而也想使用Duid来做Hive的连接池.试了试果真可以,也没报错.但是,过了一段时间,同样的代码却出问题了.离奇的是我同 ...

  3. 问题：oracle select into；结果：oracle SELECT INTO 和 INSERT INTO SELECT 两种表复制语句详解

    oracle SELECT INTO 和 INSERT INTO SELECT 两种表复制语句详解 (2011-07-08 08:59:47) 转载▼ 标签: it 分类: oracle 我们经常会遇 ...

  4. Excel向数据库插入数据（执行一次只需连接一次）-batch简单使用

    由于前端时间向数据库插入excel中的数据时,每插入一条数据,就得连接一次数据库:后来发现这种做法不好,如果excel中有很多条数据,就得连接很多次数据库,这样就很浪费资源而且不安全,有时数据库也会报 ...

  5. executeUpdate,executeQuery,executeBatch 的区别

    executeQuery : 用于实现单个结果集,例如: Select 一般使用executeQuery 就是来实现单个结果集的工具 executeUpdate 用于执行 INSERT.UPDATE ...

  6. 配置镜像yum源--解决RHN not available的问题

    由于RHN服务是收费的,在安装redhat系统时,自带的yum可能不能使用.中国有很多好用的镜像源,我们可以把yum源更改到国内镜像源上,步骤如下: 一.卸载本地yum #rpm –qa|grep y ...

  7. 使用php输出时间格式

    <? date_default_timezone_set("ETC/GMT-8"); $tm=time(); echo date("Y-m-d h:i a" ...

  8. session,cookie总结

    不同的域名生成的session_id是不一样的,(就算是相同的主域,例如:www.test.com, blog.test.com 都不一样); 相同的主域,不同的二级域名,例如www和blog都是不共 ...

  9. DR客户端一直连接服务器....（6）

    DR客户端一直连接服务器....(非未选择网卡)解决方法: 控制面板-->网络和 Internet-->网络连接,打开本地连接(以太网)属性,将IPV4协议前面的对勾去掉,重启DR 这样D ...

  10. SDUT 3364 数据结构实验之图论八：欧拉回路

    数据结构实验之图论八:欧拉回路 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 在哥尼斯堡的 ...