文章列表

# 前言 这里以 vite+vue3+ts 为例,需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件 unplugin-vue-components : 组件自动导入 unplugin-auto-import: 直接使用 Vue Composition API 等,无需导入 npm init vite@latest vite-app --template vue-ts npm i unplugin-vue-components unplugin-auto-import -D npm install element-plus...

# 前言 这里有空更新吧,我实在是太懒了 主题更新后可能某些美化内容不再适用 # 搞怪恶搞网页标题特效 在 /root/myblog/themes/Butterfly/source/js 中新建 crash_cheat.js <!--崩溃欺骗 + OriginTitle --> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden)...

# 前言 尤雨溪懂个锤子 vue,我要教他开发 vue4 # 兄弟关系通信 setup 是所有组合式 api 的序幕,其中 this 不再是组件的实例对象而是 undefined $on , $off 和 $once 实例方法已被移除,应用实例不再实现事件触发接口 我们使用消息订阅与发布仅仅只有 27kb 的第三方库 mitt npm install mitt -S 新建 src/untils/bus.js 暴露在组件中引用 import mitt from 'mitt'export default mitt()或者在 main.js 全局挂载 import...

# 前言 众所周知,单向数据流导致我们不能在子组件不能变更父组件 实际开发中我们常用引用类型数据来违规修改父组件但是不太好 vue 在 2.3.0+ 新增了 .sync 修饰符,实际上是一个语法糖 本篇文章使用的是 vue3 # vue2 示例 子组件给父组件传递数据 this.$emit('update:title', newTitle)父组件通过事件接受 <text-document :title="doc.title" @update:title="doc.title =...

# 前言 vue-quill-editor 修改内置视频标签 iframe 改为 video 本篇文章均不是原创,为了方便以后 ctrlCV # method one 新建工具函数 video.js import { Quill } from 'vue-quill-editor'const BlockEmbed = Quill.import('blots/block/embed')const Link = Quill.import('formats/link')const ATTRIBUTES =...

# 前言 v-charts 基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,可轻松生成常见的图表 曾被 echarts 支配过的恐惧,之前查看文档找配置时让我头皮发麻 今天使用 v-charts 感觉还是记不清有哪些配置,于是就手动整理总结写个小栗子 # 起步 指定版本安装 npm i v-charts echarts@4.9.0 -S入口文件引入 // main.jsimport Vue from 'vue'import VCharts from 'v-charts'import App from...

# 前言 uni-app 太能吹了,我差点就信了,不过爷最喜欢吹了 DCloud 公司拥有 800 万开发者、数百万应用、12 亿手机端月活用户、数千款 uni-app 插件、70 + 微信 /qq 群 # 常用布局组件 view:块级元素,类似于 div,用来处理大布局 text:行内元素,处理文本 image:行内块元素,是图片标签 mode="aspectFill" button:type="primary" 绿色的大按钮 block:没有意义,只是为了包裹元素,但是编译时不会产生标签 swiper:...

# 起步 安装 npm i -g @vue/cli创建 vue create mypojectnpm run serve# vsCode 插件 vetur :代码高亮 Vue VSCode Snippets :输入 vbase- 生成代码基本结构 Vue<template> <div></div></template><script> export default { data() { return {}...

# 前言 简单了解 websocket 协议 # http 协议 一种无状态协议,一次请求一次响应称为一次会话,发了请求才能收到响应,服务端无法主动给客户端推送消息,多次会话无法产生任何记录,通信完成立即断开连接 # websocket 协议 允许 Client 和 Server 建立长连接,不限次数互相推送消息,除非服务端或者客户端主动断开,否则连接会一直保持 # websocket...

# 前言 Express 基于基于 Node.js 平台,快速、开放、极简的 Web 开发框架 # Express 项目生成器 全局安装脚手架 npm i express-generator -gyarn global add express-generator查看版本 express --version# Express 创建应用 -h 参数可以列出所有可用的命令行参数 express -h可以设置模板引擎 express myapp -eexpress myapp --pugexpress --view=pug myapp初始化安装依赖 cd myappnpm i 或 yarn#...