weixin_47077674的博客

前言自从vue3 <script setup> 语法糖出现后，我的个人小项目和毕业设计都开始使用 vue3+ts 进行开发，在经历了很多的业务开发和踩坑经历后，我将vue2项目迁移升级vue3写了一个阶段性总结！请大家在真正进行项目迁移前务必先看下官方迁移的文档，以下内容尽量讲vue官方文档中比较难找到或者没有讲过的内容。vue2迁移vue3官网文档介绍以下内容和示例统一使用的是 vue3 composition api <script setup> 语法糖的写法，我会使用简

前言最近在将项目从vue2重构至vue3+ts,在其中遇到了很多的坑，这篇文章讲一下如何获取第三方组件的类型，并结合 ref api来获取子组件的节点数据代码实现首先讲一下vue3.x版本composition-api,要实现和vue2中$ref获取元素节点的方法，我们使用elementUI中的组件来举例在vue2版本中获取方式如下<template> <el-tree ref="treeRef" > </el-tree></template&g

前言​ 最近肝了几天写了一个用于管理和编辑我们小团队的一个md文档的网页版typora，在过去我们的知识归纳都是各自使用typora编辑，编辑后每周定时提交文档，由一个人汇总后发布到csdn等平台。​ 但是这样做在文档出现问题后发布的文章如果需要持续更新的话无法让团队中的其他人看到，且使用typora保存的图片都是本地的，配置图床也没有那么方便，所以干脆花点时间整理了一下需求，想着做一个网页协作版的typora，有一个基本的账号机制，一个文档可以大家一起编辑，但是不是协作文档那种同时编辑，而是一个人

请求封装实际使用中可以根据项目修改，比如RESTful api中可以自行添加put和delete请求,ResType也可以根据后端的通用返回值动态的去修改//http.tsimport axios from "axios"import NProgress from "nprogress"import type { App } from "vue"// const CancelToken = axios.CancelToken// const source = CancelToken.sour.

前言vue3官方文档更新的第一个就是组合式API，那就是说明这是非常重要的，最近我也刚入手vue3，就记录下自己刚用setup函数的一点点心得在vue2的时候,当我们的组件功能比较多的时候，对于相同逻辑的关注点的相关代码会比较分散，会增加我们对组件的理解以及维护。例如如下代码：可能这觉得没什么，但是如果分布在(data、computed、methods、watch、生命周期钩子) 等，那所展现的图片就可能会这样而这样一套代码的组件会变得非常难以阅读，因为我们很难搞清楚 哪些代码是和哪些代码在一

前言最近在将之前的后台框架从js改造为ts，其中涉及了很多vue周边生态的类型引入，这里记录一下vuex实现模块化以及Typescript支持框架版本vue3.x+vite2.x+vuex4.xvuex4.x版本ts引入写法官方文档文件结构在store文件夹中放入modules文件夹和index.ts入口文件，modules用于放置单独的模块代码实现入口文件入口文件除了按照官方的实现方式外，需要将每一个模块的State接口引入，引入后放置在RootState接口下。原理上就是将modul.

vuex的模块化自动引入在vue项目根目录中添加如下图文件夹其中modules 文件夹用于分模块存放全局数据，比如我创建一个user的模块const user = { namespaced: true,//开启命名空间 state: { id: '', name: '', tel: '', theme: 'light' }, mutations: { setUser(state, user

前言最近需要实现一个微信小程序的富文本编辑器，由于使用的是uniapp框架开发的小程序，因此就改造了一下微信小程序官方案例，并封装成了一个组件。uniapp-editor gitee仓库实现效果使用方式在需要使用富文本的页面引入组件，通过v-model绑定富文本内容即可// example.vue<template> <view> <rich-text-editor v-model="richText"></rich-text-editor&g

《tinymce》一个非常适用于vue的编辑器、它在gitHub上的星星就要突破一万大关︿(￣︶￣)︿首先我们的技术选型是 Vite2.0以上+Vue3.0 使用的是JS来引入TinyMcetinymce的安装和使用1.npm安装tinymce//执行代码,安装最新版tinymce5.0npm install @tinymce/tinymce-vue -S 2.新建文件TinyMce.vue文件//HTML部分<template> <editor v.