- 博客(29)
- 收藏
- 关注
RSS订阅原创 如何使用vue-cli，做vue3.0的服务端渲染(ssr)
上个月有网友看我之前用vite搭建的vue3.0服务端渲染demo之后，就在评论区问我有没有不是vite的vue3.0服务端渲染教程。闻此，我心中窃喜（ps：兄弟们来活了），沉睡了很长时间的我，终于又开始鼓捣了。记得上一篇vite的文章是去年3月份发布的，一晃居然一年过去了，不由得感叹光阴似箭，日月如梭啊。在去年调研vite的时候，其实刚开始是调研的webpack和vue-cli去做构建工具，但是当时这方面的生态太差了，一些关键的地方进行不下去，无奈只能弃之，转用当时风头正盛的大明星-vite，不得不说v
2022-03-23 16:38:42
3226
原创 解决vue老项目出现的{{}}问题
前端时间，又双叒叕接手了公司一个老项目。它是一个用vue最刀耕火种写法的搞的一个多页面项目，里面还穿插着jquery等各种写法，百花齐放。以史为镜,可以知兴替;以人为镜,可以明得失以敬仰之心重读老项目，里面其实有很多前人当时先进的理念，...
2022-02-10 16:57:55
1220
原创 微信小程序与h5页面无刷新通信
前段时间在产品等人的怂恿下，接手了公司一个使众人闻风丧胆的陈年老h5项目。打开项目细细的看，细细的品，果然惊喜不断，处处都是祖传宝藏(ps：我现在退出还来得及吗)。这让我想起了前段时间比较火的一首歌，歌名**《寻宝藏》**，歌词：这世界总有人在忙忙碌碌寻宝藏 这世界总有人在忙忙碌碌寻宝藏 这世界总有人在忙忙碌碌寻宝藏是的，没错！各种祖辈留下来的宝藏，琳琅满目，应有尽有。于是开始了忙忙碌碌的寻宝藏之旅，旅途的风景十分优美，让我有感而发地想说几句优美的中国话，不知不觉废话又多了，下次注意点。下面来讲
2021-07-29 18:50:59
1026
原创 Custom directive is missing corresponding SSR transform and will be ignored
最近在尝试做vue3.0的服务端渲染，自己也写了一些相关的插件，其中用到一些指令插件的时候，发现在服务端渲染解析的时候会报错，是缺少transform方法导致的，后面经过大佬指点，发现自定义指令的服务端transform方法是要自定义的，不然运行打包都会报Custom directive is missing corresponding SSR transform and will be ignored。解决方案：本人用的是vite，所以解法如下，在配置文件中传入自定义指令的服务端transform。
2021-02-25 16:03:46
1831
原创 基于vue3.0封装的虚拟滚动插件-vue-virtual-scroller
众所周知，当节点达到一定数量的时候，前端就会产生很大的性能问题，那么我们应该怎么来改善这种局面呢，没错，就是所谓的虚拟滚动，其实就是几个节点在滚动的时候移来移去，非常的乏味。其实很早之前就已经研究过，记得当时谷歌就已经有提出创建可回收节点的api，这么多年过去了，也没有去关注有没有去继续推动了，大概就是会有个原生的createCycleElement这种的api出现，尝试过在孤高度不一致的列表里，位置计算会有问题。直至vue3.0正式发布，又开始了造轮子的道路，于是vue-virtual-scrolle
2021-02-24 17:57:47
3700
6
原创 如何使用vite，做vue3.0的服务端渲染(ssr)
新春伊始，想必在座的各位都正在嗷嗷待哺的等待需求中(ps:划水摸鱼)，不好意思，理直气壮的说我也是。几天鱼摸下来，心里也不是滋味，看着身边的同学一个个每天都在学这学那，搞得我也不是很好意思。于是趁着现在各种完全体的方案和框架还没出来之前，那我们把vue3.0的服务端搭一搭吧，自己写写还是很有意思的。好了，废话就先到此，开局调研了基于webpack和vue-cli去搭，途中碰到了一些问题就放弃了，由于尤大最近很痴迷于vite，vue-cli相关的生态也有些滞后。于是反手就一手vite搞起，看看到底有什么魔力
2021-02-24 17:33:08
11283
28
原创 用inquirer编写一个好玩的前端项目docker自动化脚本
const inquirer = require('inquirer');const fs = require('fs');const exec = require('child_process').execSync;const FILENAME = 'docker-log';const COMPOSENAME = 'docker-compose.yml';const dockerBuild = () => { return exec('docke...
2020-12-05 16:58:26
321
原创 flutter 封装评论回复弹出键盘输入框组件
本来打算开启下一段作死旅行的，后来想了想还是先把flutter这段不堪回首的作死往事总结一下吧，好了，如之前的博文一样，不知不觉又开始废话连篇了。（ps：这么爱讲废话，不知道自己去日记）。 这次flutter重构之旅包含部分社区的功能，社区又怎么能少了正常的用户交流呢，所以一个评论回复而且能发图不发种，xx万人捅的发布组件呼之欲出。思来想去，
2020-09-03 11:19:33
2887
原创 flutter 拍照以及选择相册多张图片组件封装
flutter正式发布以来，官方库和三方库也是该有的功能都有了，可以说是选择颇多，但是还是建议按照官方的来，毕竟再怎么搞，自己也不能搬起石头砸自己的脚，按照正版的永远没错。 这里我选择的是image_picker，photo，这两个库，具体使用哪个版本，可以点进去查看最新的版本号，不过如果你的androidX版本过低，会产生一些兼容问题，具体
2020-09-01 17:53:55
2003
6
原创 flutter 使用dio如何上传图片等资源至七牛云
最近闲来无事又重拾起了flutter之旅（ps: 码农就是这么的贱，没事喜欢找事），哈哈，上述只针对我自己，向广大码农道歉，别给我发律师函哦。 背景：n年前，初学node的时候搭建了一个漏洞百出的后台接口系统，又不想去重写，只能能用就用，写到一半发现，算了，倔强个什么劲呢，直接用别人现成的接口算了，不是有个大大大佬，把微博用flutter重构
2020-08-19 10:06:33
2170
4
原创 基于vue的音频audio播放+管理器(vue-audio)
全局的微信小程序音视频管理器，有需求的朋友请见上上篇。自从弄了小程序的音频播放器后，就一直在想，要不h5也弄一个吧，反正该来的都会来的，你永远不知道明天跟需求，哪一个会先到。平时造造轮子，已备不时之需，好，那么接下来我们来捋一捋这个需求。需求：传个地址进去给我播出声来。（？？？这不是基本需求吗？）去掉audio标签原有样式。（实在是石器时期的造物）有进度条，支持拖拽，点击跳转播放。（这才是正常需求啊）保证全局只有
2020-07-30 18:00:28
3592
9
原创 flutter -各类自定义弹窗(图片预览，输入框，键盘)以及如何阻止事件冒泡
开局废话：由于公司app后期需要做混合开发，又担心h5的性能问题。于是迫不得已，只能两端齐搞，验证一些性能优化的问题。打开了一年前flutter正式发布时，蹭热度创建的现已布满藤蔓的仓库，微微颤抖的双手，开始敲击键盘。 先说下普通的自定义弹窗吧，鉴于弹窗一般只起一些提示，跟选择功能，所以没必要去单独注册路由，继承showDialog父类就可以
2020-07-27 16:31:58
1640
1
原创 微信小程序，分享如何封装一个全局支持暂停，拖动等各类操作的音视频等多媒体管理器
不知不觉埋头于业务已许久，距离上一篇分享应该很久很久以前，具体何时，已无从知晓。慢慢的开始觉得锅有点热，感觉呼吸有点困难，温水里面的青蛙趁着腿还没完全麻木的时候，也想着开始重拾旧梦，稍微往上蹬蹬，好了，废话就不多提了，时不时的低头总结某段时间的成果大过于做10个新项目，下面就开始慢慢的总结之路吧！（ps：其实是往事不堪回首） 前置背景介绍：公
2020-07-13 15:45:30
658
原创 超智能vue图片懒加载之指令化管理（vue-img-lazy-load）
分享一个基于vue的图片懒加载的指令插件，使用起来也是极其简易。 图片的懒加载，可以减少首页首次加载的数量，减少服务器的压力，优化用户体验，有点就不多提了，所以在app里使用图片懒加载是很必要的。安装npm install vue-images-lazy-load --save使用（最开始的名字有冲突，所以使用了vue-images-lazy-loa...
2019-02-25 23:22:41
2063
原创 分享vue项目的服务端渲染学习过程
最近抽出了点时间，弄了下vue ssr项目，至于ssr的优点就不多提了。学习路线参照了官方实例，有兴趣的同学可以去看下。 我的项目地址，主要使用了ssr+typescript+vuex+vue-cli 2.0，有兴趣的同学，欢迎start。那么就先讲下前期的打包配置吧，本地开发，也就是所谓的dev，需要热更新等一系列便于调试的插件，所以需要区分webpack的配置。代码...
2019-01-08 23:42:38
1487
原创 如何在node和vue以axios作为交互的项目中使用cookie或者set-cookie
最近在用vue+node+mysql重构项目，前端用的vue+typescript写的，后端用的express框架，没有用太多的插件，用原始撸的。 项目地址https://github.com/Vitaminaq/node-mysql 欢迎交流。 刚好有个登陆页面，为了保存用户信息，必须得使用token。之前的思维一直局限在，用户登陆时，生成token，并用放在data...
2018-11-02 23:36:07
6274
原创 用指令管理vue滚动状态以及滚动条复原，让你为所欲为。
滚动状态管理以及滚动条复原是困扰了我很久的问题，想必也有和我有同样感受的同学，比如首页跳详情页，以及各详情页滚动条的管理，让人感觉很难受，那么如何来简化它呢？那么就使用这款神奇的插件vue-rescroll吧，让你疯狂飙车，为所欲为。 用了指令就不可以用keep-alive来进行缓存，因为那样自定义指令里的钩子函数不会触发，自然指令就失效了，一般的滚动插件配合vuex...
2018-09-12 22:10:39
2397
原创 分享vue + vuex + typescript的一次项目代码重写
俗话说一个项目，用代码重写十次，每次肯定收益匪浅。后续还会持续重构ssr等。在vue里使用ts，一般分为两种情况： 在vue-cli 3.0以下的老项目中。 在最新的vue-cli 3.0中。vue-cli 3.0在最新的vue-cli 3.0中使用typescript，可以说是非常方便了，因为添加了对ts的支持，用vue create 项目时，选第二项自定义...
2018-07-19 23:38:18
7874
2
原创 如何改装element-ui表格，使之拥有增加和删除功能成为动态表格
最近项目需要使用一个动态表格，使之拥有增加删除以及大表单的保存功能，界面框架定的是element-ui，仔细找了找，并没有现成的动态表格可以使用，没办法，只能开启改装之路。我的思路是这样的，就是在拿到后台数据时，在末尾在加上一个标记空数组，使之成为增加框，就可以了。这样就需要一个初始化的标记空数组，在没有数据的时候也会出现增加框。通过v-if以及v-else就可以实现基本的判断，具体...
2018-05-03 10:28:12
9183
原创 vue项目如何使页面后退不刷新，且还原滚动条位置
新指令化管理滚动状态地址https://blog.csdn.net/theoneEmperor/article/details/82669022(欢迎star)，滚动条保存以及回退只需要一条指令，让你为所欲为。 最近学了下node，自己用vue和node弄了个项目。在首页跳到详情页，然后从详情页再跳回来的时候，发现总是要刷新页面，这样对用户操作很不友好，意味着用户不...
2018-04-03 17:01:31
7334
原创 基于vue，nodejs前后端分离的建站实践(web app)
开发前的服务器部署写了一篇爬坑日记，就不多提了。 前端设计的比较潦草，后台主要学习了慕课视频后，动手去写的，有正在搭小网站的同学可以一起交流交流，我也是被坑的不想说话了(此处省略一万字)。由于学习还很浅，代码不够严谨与完善，后期进行补修吧，这段时间也没什么时间了，功能后期慢慢完善，服务器也有点便宜，连个发表情的插件都抗不住，我也很难受，买不起。先分享过来，希望热爱开发的我们，少踩坑。...
2018-03-30 15:01:40
3363
3
原创 如何在本地服务器部署网站
部署完FTP服务器之后，就想部署下网站，这个过程还是蛮坎坷的，搜索了很多资料，每一篇都概括不全，可能是我电脑毛病太多了吧，看了我这，估计百分百成功了。废话少说，上姿势① 我的电脑，右击管理，进入服务和应用程序
2017-12-21 23:27:35
8105
2
原创 如何在本地搭建FTP服务器细节全过程
能出现的问题基本有详细解答，包看包会，废话不多说直接上姿势，各位看官请我一（hu）一(shuo)道(ba)来(dao)：
2017-12-20 11:48:54
4957
7
原创 javascript实现二叉树排序，前中后序遍历，最大最小值特定值查询以及删除节点
函数运行时，会产生一个栈用来存放数据，当遍历到目的节点时，操作结束以后，就会自动执行出栈操作，所以每次执行完毕指针都会自动跳回根节点。可以在开发者模式里打断点看到全过程。<!DOCTYPE html><html><head><meta charset="utf-8"><title>二叉树排序</title>
2017-11-24 22:22:13
529
2
原创 vue-cli项目以及普通静态网页如何部署到github pages
首先我们登录github，进入项目仓库，点击setting,找到github pages栏的source，点开，如下图：第一个的意思是，建立一个gh-pages分支，第二个是直接选择主分支部署到github pages,第三个是主分支下的docs文件夹。能成功部署的条件是必须有个index,html作为入口，也就是说无论用哪种方式，都要有个index.html在主目录。静态网页的话就可
2017-10-04 16:22:24
4668
1
原创 关于vue-cli项目npm run build后，index.html无法在浏览器打开
一 般打包的时候命令行会出现如下错误提示：然后去dist文件夹运行index.html。在浏览器里会发生如下错误提示：解决的措施为： 先在config/index.js把原本是./改成/，然后再去bulid文件夹的build.js里，把命令行提示那段console.log给删除掉，或者注释掉，再次打包就可以正常运行
2017-10-03 18:08:33
12643
原创 vue-cli+webpack前端使用后台接口跨域问题的多种解决及其原理和产生原因
解决方式： 基于vue-cli 2.0版本，下载好工程后，找到config文件夹里的index.js文件，然后就是把上图的target改成你的接口地址前面的那部分就好了，底下的^/api就是把前面那些替代成空字符串，接口就写替代的后面那部分路由地址就好了，不过我推荐不要用‘/api’还是用‘’空字符串代替，这样你部署到服务器的时候路由才不会出问题，不然有可能会出现问...
2017-09-17 13:46:16
8329
原创 关于新手入坑vue，页面跳转样式错位刷新又好了的情况
在项目开始的时候，一股脑的热情把所有的代码都码好了，然后就开始测试各模块的功能。在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。于是就打开浏览器查看在页面跳转时样式的变化，我发现有些页面，在跳转时页面的样式并没有加载，而是沿用了前一个页面的，或者前面已经加载过页面的样式。一开始觉得很奇怪，后来想了想，这是个单页面应用。是不是样式的id 或者 class ...
2017-09-15 11:13:46
13930
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人