vue脚手架及vue-router基本使用


Posted in Javascript onApril 09, 2018

首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具,对于刚接触的新手们建议关闭,不然代码写的不符合它的规范你的编译器会一直报错,如下图

vue脚手架及vue-router基本使用

安装好脚手架之后就像这样

vue脚手架及vue-router基本使用

终端输入npm run dev,然后打开localhost:8080就可以看到项目运行啦

vue脚手架及vue-router基本使用

大致分析一下几个比较常用的文件把,如下图

vue脚手架及vue-router基本使用

1.build:主要用来配置构建项目以及webpack

2.config:项目开发配置

3.npm或者cnpm所下载的依赖包

4.你的源代码

5.静态文件夹,webpack打包时不会打包这里文件

6.最外层的页面一般title等都设置在这里

7.存放你要npm依赖包的json数据

大致介绍完项目结构,我们一起看看它页面的源码吧!

vue脚手架及vue-router基本使用

先从这个App.vue开始,这个文件仅此于外部的index意思就是index包含所有页面,而App.vue包含除了index的页面,也就是路由嵌套,后面会说到,在这里所创建的文件都是文件名.vue,页面的html格式就是一个template标签中包含一个div,相当于组件化的形式,而组件的内容写在这个div中(一个页面必须只有一个template包一个div,内容写在这个div中,不然会报错),而这个router-view标签就是当前页面下的子页面,可以理解成这个router-view是另一个页面,被当前页面所包含着,有点类似ifame标签的功能。

css,js格式

vue脚手架及vue-router基本使用

现在我们来看看HelloWorld.vue这个页面,这里js,css的代码放置格式它已经帮你写出来了,按照这种格式写就行了,需要提醒的就是style标签中的scoped属性,如果没写这条那么这个style的样式会影响到这个页面所有的子路由,如果加了那么这个样式只对当前页面起作用

看完页面我们看看路由的配置如下图

vue脚手架及vue-router基本使用

路由的路径在router下,刚开始打开会看到有报错,其实不是语法错误,是因为编译器默认编译es5的语法,而vue脚手架用的是es6的语法,我用的编译器是webStorm,只要设置一下就行了。

vue脚手架及vue-router基本使用

vue脚手架及vue-router基本使用

简单介绍一下routers中的结构,这里主要用来配置路由的,上面说过所有子路由都在App.vue下,所有App.vue是最外层的父路由,这里的routes中存的就是路由的数组,path就是你要访问你所创建的页面的路径,这里写的是根路径序所以你直接访问localhost:8080就会出现一个App.vue中插入一个HelloWorld.vue的页面(这个相当于路由嵌套),name想到与给它命名这个比较无关紧要,component相当于你要引用的页面,这里引用的是HelloWorld.vue这个页面,主要上面的import,这里的HelloWorld是一个变量,对应上面的路径文件

现在教大家创建一个文件,并配置路由

先创建一个后缀为vue文件,并把最基本的html结构写上

vue脚手架及vue-router基本使用

然后配置它的路由,先引入这个文件用import,然后填写要访问这个文件的路径我用/test,所有要打开这个路由就输入localhost:8080/#/test,在本引入的文件拿到component中

vue脚手架及vue-router基本使用

输入url,一个APP.vue中嵌套test.vue的页面就呈现了

vue脚手架及vue-router基本使用

vue脚手架默认的路由嵌套就是所有页面都嵌套在App.vue页面下,现在教大家自由嵌套自己的页面现在我把test页面嵌套到HelloWorld.vue页面下

首先在HelloWorld.vue界面下加一个router-view标签

vue脚手架及vue-router基本使用

然后配置HelloWorld.vue的子路由

vue脚手架及vue-router基本使用

这样localhost:8080/#/test就是一个APP.vue嵌套HelloWorld.vue在嵌套test.vue的页面了如下图

vue脚手架及vue-router基本使用

这样简单路由嵌套就完成,在说说路由跳转,比如你给一个按钮绑定一个函数,实现点击按钮跳转到test页面那在函数中可以用

this.$router.push({path:'/test'})

如果要回到上一个页面用

this.$router.go(-1)

大致内容就是这些,如果有哪里说错或者遗憾还望多多包涵,或者联系我,大家多交流交流!

总结

以上所述是小编给大家介绍的vue脚手架及vue-router基本使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
详解在React里使用"Vuex"
Apr 02 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
vue的for循环使用方法
Feb 12 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 #Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 #Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 #Javascript
webpack 模块热替换原理
Apr 09 #Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 #Javascript
浅谈webpack 自动刷新与解析
Apr 09 #Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 #Javascript
You might like
php 应用程序安全防范技术研究
2009/09/25 PHP
php变量作用域的深入解析
2013/06/03 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
javascript demo 基本技巧
2009/12/18 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
给Python入门者的一些编程建议
2015/06/15 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python 必须了解的5种高级特征
2020/09/10 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
经典团队口号大全
2014/06/21 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
网吧管理制度范本
2015/08/05 职场文书
2019财务转正述职报告
2019/06/27 职场文书
创业计划书之面包店
2019/09/17 职场文书