VUE项目实战(一)
VUE项目实战(一)
- 1.vue-cli脚手架初始化项目
- 2.项目的其他配置
- 1.项目运行起来的时候,浏览器自动打开
- 2.eslint校验功能关闭
- 3.src简写为@
- 3.路由传参
- 4.路由传参相关面试题
- 5.重写push和replace方法
1.vue-cli脚手架初始化项目
1.首先需要下载node+webpack+淘宝镜像
2.Vue创建项目:
- npm install --global
- vue-cli vue init web pack “项目名称”
- npm run dev
3.目录介绍
- node_modules:项目依赖文件夹
- public:一般放置一些静态资源,需要注意,放置在public中的静态资源,webpack打包的时候会原封不动的打包到dist文件夹中;
- src:程序员源代码文件夹
2.项目的其他配置
1.项目运行起来的时候,浏览器自动打开
– package.json
"scripts":{"serve": "vue-cli-serve serve --open"
}
2.eslint校验功能关闭
– 在根目录下,创建一个vue.config.js
module.exports = {//关闭eslintlintOnSave: false
}
3.src简写为@
– 创建jsconfig.json
{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]},//在这两个文件中不起作用"exclude": {"node_module","dist"}}
}
3.路由传参
1.字符串形式
在index中,要进行占位:path:“search/:keyword”
this.$router.push('/search/+ this.keyword +'?k='+this.keyword.toUpperCase()')
2.模版字符串
this.$router.push('/search/$${this.keyword}?k=${this.keyword.toUpperCase()}')
3.对象:最常用的写法
this.$router.push({name: "search", param:{keyword:this.keyword}, query:{k:this.keyword.toUpperCase()}}
)
4.路由传参相关面试题
- 路由传参(对象写法)path能否可以结合params参数一起使用?
— 不可以,只能用name; - 如何指定params参数可传可不传;
— 在配置路由的时候,在占位的后面加上一个问号; - params参数可以传递也可以不传递,但是如果传递是空串,如何解决;
— keyword: ’ ’ || undefined - 路由组件能不能传递props数据;
— 可以;
1.布尔值写法: params
props:true
2.对象写法:额外的给路由组件传递一些props
props:{a:1,b:2},
3.函数写法:最常用,可以params参数、通过props传递给路由组件;
props:($route)=> ({keyword:$route.params.keyword,k:$route.query.k})
5.重写push和replace方法
路由跳转有两种形式:声明式导航和编程式导航(push)
VUE项目实战(一)相关推荐
- vue 动态添加class_前端开发:Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容 项目环境搭建 路由导航实现 ListVie ...
- vue 将字符串最后一个字符给替换_前端开发:Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容 项目环境搭建 路由导航实现 ListVie ...
- 【VUE项目实战】68、使用pm2管理项目
接上篇<67.上线-开启gzip和配置HTTPS服务> 上一篇我们学习了如何开启gzip配置来减少文件访问体积,并配置HTTPS服务.本篇我们讲解一下如何使用pm2管理项目. 本篇是该系列 ...
- Vue项目实战 —— 后台管理系统( pc端 )
前期回顾 我只写注释 -- 让Ai写代码_的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_的博客-CSDN博客https://blog.csdn.net/m0_57 ...
- 【VUE项目实战】32、权限管理-实现角色列表
接上篇<31.权限管理-实现权限列表> 上个阶段我们完成了权限管理模块,本篇我们来介绍用户.角色和权限三者的关系,并完成角色管理列表模块. 一.权限管理业务分析 通过权限管理模块,控制不同 ...
- 【VUE项目实战】64、CND优化ElementUI以及首页内容定制
接上篇<63.指定打包入口及加载外部CDN资源> 上一篇我们为开发模式与发布模式制定不同的打包入口,然后为项目加载外部CDN资源.本篇我们来学习通过CND优化ElementUI的打包,以及 ...
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录 前言完 效果图 : 登录含签权 注册带正则 个人中心 下拉加载更多主页 修改个人中心 视频播放加关注+收藏 评论盖楼A回复B B回复C C回复A类似 项目开始 封装登录.注册 封装登录 从零到一 ...
- 【VUE项目实战】59、订单的物流信息查询功能
接上篇<58.订单修改收货地址的功能> 上一篇我们完成了订单列表的修改收货地址功能,本篇我们来实现订单的物流信息查询功能. 一.要实现的效果 我们要实现点击操作列的"物流进度&q ...
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
前期回顾 30秒学会 -- <获取验证码基本操作>_0.活在风浪里的博客-CSDN博客前期回顾 懒人必备 -- 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用, ...
- 【VUE项目实战】56、商品添加功能(六)-提交添加的商品
接上篇<55.商品添加功能(五)-商品内容模块> 上一篇我们完成了商品内容编辑模块的开发,也即是完成了商品所有的信息编辑,本篇我们就来开发提交商品所有信息到后台的功能. 一.要实现的效果 ...
最新文章
- Redis 笔记(15)— 管道 pipeline(客户端将批量命令打包发送用来节省网络开销)
- 如何对batch的数据求Gram矩阵
- C# 中的三个高级参数 params
- Swin Transformer 升级,Swin V2:向更大容量、更高分辨率的更大模型迈进
- 一步步编写操作系统 69 汇编语言和c语言共同协作 70
- MongoDB数据库CXX Driver编译
- 智能一代云平台(十):Jboss远程访问流程总结
- 如何访问嵌套母版页中的控件
- 两坐标点的直线距离c语言,c语言求平面上2个坐标点的直线距离、求俩坐标直线距离作为半径的圆的面积、递归、菲波那次数列、explode...
- MySQL 操作语句大全(详细)
- 渥太华大学计算机科学,加拿大渥太华大学计算机科学排名第四
- fetch.php是什么意思,fetch什么意思
- Pocket PC、Pocket PC phone、Smartphone的区别
- 什么pdf转换成word转换器在线好
- 音视频技术开发周刊 | 244
- html怎么打出一个圆点,如何打出两个字中间的圆点
- python作中国地图背景气泡图_Excel图表中制作中国地图背景气泡图的操作方法
- 如何使用latex表示微分结果
- 软件测试|个人心得与资源分享 - 1
- 聊聊新能源汽车国家平台对接