学习 Vue.js 遇到的那些坑


Posted in Vue.js onFebruary 02, 2021

排名不分先后

最近好像都是只发了一些生活类,吐槽的一些 blog,不更新点技术相关的 可能有人会觉得 这家伙肯定又在偷懒了。

那么 好 我要开始装逼了

类空指向

就是类似于空指针的一种错误方式 不会在 console 上报错 非常难找的问题

resp.data.user.avatar

//如果这个user是null的话 这么调用不会报错 也不会向下执行 非常坑

//如果你想判断这个avatar的话 要这么做

if(resp.data.user && resp.data.user.avatar){
 //do...
}

ES6 箭头函数

箭头函数和非箭头函数也是有很大区别的

//普通匿名函数写法
api()
.then(function(resp){
 this.count()
 //注意这个this 不是能正常使用的 count会是个undefined
})


//ES6 箭头函数
api()
.then(resp => {
 this.count()
 //这里没毛病
})

vuetify

这是一个基于 Google Material 设计语言的 UI 框架,可以在 Vue.js 运行。

只是安装方式有点特殊,并且它的插件安装方式也很特殊。

例如 vuetify 的 dialog

import VuetifyDialog from 'vuetify-dialog'
import vuetify from './plugins/vuetify';

Vue.use(VuetifyDialog, {
 context: {
 vuetify
 }
})

这就导致你写 UI 的时候 要面向 Google 编程。(虽说其他后端语言也差不多 笑)

vue-cli

如果你是要新创建一个项目,并且这个项目规模不是特别大。

我非常推荐你使用 vue-cli 创建,说简单点儿 这会提升 b 格。

废话少说 上图

学习 Vue.js 遇到的那些坑

vue create your_project_name

vue ui

vue ui 会打开一个可视化页面 像是上图那样。

然后在里面导入由 vue-cli 创建的项目就可以和上图一样了 :)

异步和同步

其实之前有个非常蠢的想法。

就是在用户输完表单之后,立即和服务器进行验证,然后将结果刷新到 UI 上。

但是这个刷新 UI 需要一个同步操作。

我就一个劲的折腾怎么去搞定将 axios 的异步操作变成同步。

如果是之前的 jQuery 就非常简单么 只需要将里面的 aysnc 属性改掉就可以了。

但是你每次发请求 浏览器都会在 console 上提示 不推荐 XHR 同步请求。

为啥呢,因为浏览器里面页面是单线程的,如果你的请求是同步的,那么就会导致每个请求都会让页面卡住一定的时间。

所以我最后还是改成了逐步验证的方式 让所有的请求都是异步操作的。

运行和部署

如果你本地开发

运行 serve(有些项目是 dev) 会开放一个端口号 让你访问用户界面,并进行接近实时的 UI 调整。

如果你是要部署到线上 需要先执行 build 会在输出目录里面生成静态文件。

再把这些文件部署到服务器上 像是:

  • nginx
  • caddy

这里我非常推荐 caddy,它是一个基于 golang 开发的服务器,部署轻量化,并且带有管理 api,非常良好的支持 Http2,并且 支持 http3。

TIPS

这里只记录一些刚开始玩的项目,在后面的开发里,还会遇到更多问题。
例如页面之间的刷新,等等等等。

所以很快就会有下一章的。

希望能帮到你。

以上就是学习 Vue.js 遇到的那些坑的详细内容,更多关于学习 Vue.js 遇到的坑的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
Vue常用API、高级API的相关总结
Feb 02 #Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 #Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 #Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
vue-video-player 断点续播的实现
Feb 01 #Vue.js
Vite和Vue CLI的优劣
Jan 30 #Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 #Vue.js
You might like
php escape URL编码
2008/12/10 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
33道php常见面试题及答案
2015/07/06 PHP
教大家制作简单的php日历
2015/11/17 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue实现页面滚动到底部刷新
2019/08/16 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python实现list由于numpy array的转换
2018/04/04 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
Python实现SMTP邮件发送
2020/06/16 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
文明城市创建标语
2014/06/16 职场文书
学校食堂标语
2014/10/06 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
MySQL创建定时任务
2022/01/22 MySQL