新建一个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. 机器学习：评价分类结果（ROC 曲线）

    一.基础理解 1)定义 ROC(Receiver Operation Characteristic Curve) 定义:描述 TPR 和 FPR 之间的关系: 功能:应用于比较两个模型的优劣: 模型不 ...

  2. GUI练习中

    总结:JFrame和Frame是有很大差别的. 不要混淆.否则方法是不能成功调用的 特别是背景色:JFrame.对象f在main里无法调用背景色前景色都不想显示 一下是书上的一段代码,编译错误,但是可 ...

  3. maven中maven dependencies中依赖出现了项目

    maven 中maven dependencies中依赖出现了项目,把依赖的项目关掉,项目消失,但是还是无法打包 ,出现的错误如图.说明:依赖的项目为project-dao  打包的项目为projec ...

  4. 2015.3.2 VC++6制作非MFC dll以及VS2005、VS2010调用

    1.在VC6中新建工程,选择Win32 Dynamic-Link Libary,输入dll名称如 DLL2015 2.在类型选择中,选择第2项 A Simple Dll project OK 3.随后 ...

  5. Spring-@value用法详解

    为了简化读取properties文件中的配置值,spring支持@value注解的方式来获取,这种方式大大简化了项目配置,提高业务中的灵活性. 一.两种使用方法 1.@Value("#{co ...

  6. ORACLE——日期时间格式化参数详解 之二

    2.8 DD 指定日期在当月中第几天(范围:1-31) SQL> select to_char(sysdate,'DD YYYY-MM-DD PM hh24:mi:ss ') from dual ...

  7. linux命令-分区表fstab

    磁盘分区后需要格式化,挂载之后才能使用 我们有开机后自动挂载的需求,方法有两种 1.配置文件的形式,把mount写到配置文件里去 cat /etc/fstab 2.把挂载命令写到一个文件里 ls /e ...

  8. 关于android studio中使用class.forname()方法动态获取类实例报NO CLASS FOUND异常的几种处理方法

    最近在做一个项目的时候需要用到反射来回调子类的方法,但是在反射过程中总是在class.forname()方法抛出NO CLASS FOUND异常,经过几部检查,问题解决,在此总结一下引起该问题的原因 ...

  9. solr安装部署、solr测试创建core、用solrj 访问solr（索引和搜索）

    一.安装solr4.8: 1.把apache-solr-4.8.1\example\webapps下的solr.war文件拷贝到Tomcat下的Tomcat7.0\webapps目录下,tomcat启 ...

  10. final 子类禁止重写

    <?php //子类中编写和父类中完全一样的函数,是对父类中的函数进行重写 class BaseClass{ public function test() { echo "BaseCl ...