vue - router + iView 的使用(简单例子)
所使用的工具:谷歌浏览器、Nodejs(自带npm)、HBuilder
0、要先安装Nodejs,下载安装即可
0-1、安装vue-cli,打开cmd 输入 npm install -g @vue/cli 安装cli服务,安装完后,我们就有一个vue命令可以被调用了。
1、使用 vue 命令 创建一个项目
回车。
回车。
等待创建完成。
2、项目创建完成,切入到项目中
3、然后增加一些UI的支持(我这里演示使用的是 iView 你也可以使用 ElementUI)
回车。
回车。
回车。然后等待..........
安装完成。
4、增加 router 支持。
先输入 vue add router 然后回车。
回车。
然后等待安装..........
安装完成。
5、开启项目的服务。
5.1 输入 npm run serve 然后回车。
服务开启成功。
6、在浏览器输入http://localhost:8080/
这样就可以访问到我们的项目主页面了。
注意:V 图标上面有 Home 和 About 点击可以进行换页面。(这里使用到了router,这是我们装router的时候,它自动给我们做了一个演示的例子)
7、我们来编码一下。
打开目录
去到HelloWord.vue 进行一个页面编码。
将里面的东西全部去掉,然后去iView官网找一个组件来使用。地址:https://www.iviewui.com/components/layout
使用这个布局吧。
复制这个布局的演示代码。
粘贴到HelloWord.vue中。(保存)
8、主页面就变成这这样子了。
7、将App.vue文件中的代码编码为:
主页面就改变了。
8、修改Home.vue文件的代码(修改完成记得保存)
9、去HolleWord.vue编写一些代码
10、改变通过 to 得到的组件信息
11、动态路径参数(router.js)
通过 this,$route.params(得到的是一个数组)的方法取出。
运行结果:
vue-router详细使用的地址:https://router.vuejs.org/zh/guide/essentials/dynamic-matching.htm
本次示例下载地址:https://github.com/oukele/router-demo
坚持就是胜利,加油!!!
vue - router + iView 的使用(简单例子)的更多相关文章
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- vue router拦截器的简单使用
之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过 ...
- Vue Router的简单了解
Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转.Vue开发的是单页面应用(Single Page Application,SPA),不能使 ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue Router的官方示例改造
基于Vue Router 2018年8月的官方文档示例,改造一下,通过一个最简单的例子,解决很多初学者的一个困惑. 首先是官方文档示例代码 <!DOCTYPE html> <html ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- Vue Router 使用方法
安装 直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指 ...
随机推荐
- Appium,AirTest切换使用时,appium罢工之坑(1)
由于一些元素不能定位,所以最近项目引用了Airtest 问题场景: case的开始使用appium,case执行过程中,切换到airtest操作元素,待执行完airtest相关步骤之后,后续使用app ...
- Django-给视图加装饰器
给FBV加装饰器 FBV:function based view FBV本身就是一个函数,所以跟普通函数加装饰器是一样的 # 装饰函数是要在APP文件中定义,本例是在app01\templatetag ...
- 338.比特位计数( Counting Bits)leetcode
附上:题目地址:https://leetcode-cn.com/problems/counting-bits/submissions/ 1:题目: 给定一个非负整数 num.对于 0 ≤ i ≤ nu ...
- pytorch基础问题
本文将自己在pytorch学习中遇见的各种问题整理起来,并且持续更新. 1:torch.Tensor和torch.tensor的区别 开始使用torch.tensor和torch.Tensor的时候发 ...
- svn修改代码URL整合路径
我们平常开发的代码都是在A服务器上整合的,最近A服务器突然无法访问了,所以今天我们更换了一下服务器.svn如何安装的就不说了,这里只介绍一下如何更换SVN URL的. 在你拿到URL后,在工作文件夹下 ...
- 【linux杂谈】查看centOS系统的版本号和内核号
因为种种原因,我们通常需要查看centOS系统的版本号和内核号. 这里以centOS 6为切入点,展示了几种查看版本号和内核号的方法,同时也验证了其在centOS 7上的可行性. 一.centOS 6 ...
- DQN算法原理详解
一. 概述 强化学习算法可以分为三大类:value based, policy based 和 actor critic. 常见的是以DQN为代表的value based算法,这种算法中只有一个值函数 ...
- Jenkins 启动不来的排查方法
1.通过 ps -ef | grep tomcat找到jenkins的路径,下有logs,可以查看日志 2.装插件报错时,报错信息里会提示依赖的插件版本号,到jenkins官网下载对应版本的插件即可, ...
- MSF魔鬼训练营-5.3 MS08-067安全漏洞实战
msf > search ms08_067 Matching Modules ================ Name D ...
- Elasticsearch Metric聚合
首先查看index文档信息 $ curl -XGET "http://172.16.101.55:9200/_cat/indices?v" 输出 health status ind ...