vue3踩坑记录

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3踩坑记录相关的知识,希望对你有一定的参考价值。

参考技术A 经查官网,.native的写法已经废除

路由进入时渲染背景图片
可以看到,导入时,只有如下两个选项可供选择,而在setup中写beforeRouteEnter又会报错

经多方查找,发现目前使用的版本为vue-router4,BeforeRouteLeave在router4中被改为onBeforeRouteLeave,BeforeRouteUpdate则被改为onBeforeRouteUpdate,至于beforeRouteEnter则没有找到对应的hook

想在生产环境下统一配置url,不用每次修改后打包( 配置方法 ),结果ts的语法检查出现了这样一个错误

还有一种方法(不推荐):直接将window对象定义为any类型
(window as any).xxx

参考: vue3报错Uncaught Error

vue2中用法:

vue3用法:

7.vue3+ts中使用process报错,找不到名称“process”。是否需要为节点安装类型定义?

第一步:npm i --save-dev @types/node
第二步:找到tsconfig.json文件,引入node:"types": ["node"]

回顾vue开发spa(踩坑记录)

    使用vueJS开发前端页面差不多也有大半多年了。由于项目后台管理页面最早都是使用JQ进行开发的,刚开始使用vue的时候,只能是直接在页面里面引入vueJS框架进行开发,期间把项目后台的编辑页面和其他复杂页面全部改用vueJS的了(没有用到组件,只是增强了一下交互,开发更简单便捷)。由于工期和个人习惯问题,期间也留下了很多坑和隐患,比如不少页面是JQ和vue混用,导致后来改功能的时候痛不欲生……

    所以最近有一个新的后台管理页面,索性使用vue全家桶(vue,vue-router,vue-cil,vue-resource)进行开发了,组件之间的关联性不是很大,所以没用到vuex,状态传递我更多的是使用query参数进行传递(也就是get参数)。

    下面就会说到在项目开发中遇到的各种问题了。

    首先一开始的是,一定要用CNPM下载依赖!!!有遇到莫名其妙的问题话,删除依赖再重新下载一般是可以解决的

    最坑的一次是,依赖下载没问题,已经开始开发好几天了,突然启动不了(npm run dev报错,npm run build可以),尝试删除依赖,重装CNPM,NPM,webpack,nodeJS还是不能解决……最后没办法只好重装电脑才终于可以启动运行了。

      只要理解vue的组件、父子组件的消息状态传递(props/events),那么你就可以开始使用vue写SPA页面了。其他东西都可以边看API边写

    .vue文件其实就是一段js模块,由vue-loader去进行解析成js,我们在使用webpack编译运行的时候:webpack会帮我们初始化所有的JS模块,当你需要的时候自动去请求指定模块进行渲染。

    vue-resource本质上是跟JQ的ajax方法是一样的,你可以直接在mainJs里面进行全局请求的校验拦截(例如验证是否登陆之类)

this.$http({
    method:‘GET‘,
    url:‘‘,
    body:{},
    headers: {},
    emulateJSON: true
}).then(function(success){},function(error){})
//是不是感觉跟JQ的ajax相差无几

    经常有人在群里问如何在vue或者react里面ajax……建议如果是对JavaScript的ajax不是很清楚的话(HTTP协议也是必须要了解的),先去了解一下XMLHttpRequest对象,这样不管是遇到什么前端框架,写ajax请求都是没有问题滴~

    了解vue-router的各种钩子函数方法,路由机制和使用,常用的钩子函数无非是beforeEach(组件路由跳转前),afterEach(组件路由跳转后) 这方面我自己做的也不是很好,只懂的如何使用,还是要继续学习~

    

 

以上是关于vue3踩坑记录的主要内容,如果未能解决你的问题,请参考以下文章

基于vue2使用vue-awesome-swiper 轮播图(踩坑记录)

Kubernetes踩坑记录

ios 踩坑记录

python踩坑记录

Qt QCustomPlot 踩坑记录

Qt QCustomPlot 踩坑记录