开始之前 之前在 vue2 中经常使用类似方法，直接 reuqire(<url>) 即可。今天在写 vue3 的内容时，遇到了，习惯性的填上了这个，结果发现不行~ 都怪我，确实还没完整的看上一遍 vite 的内容，就是一直使用而已。这下好了，赶紧一番搜索翻阅文档，vite 和 webpack 的核心差别还是挺大的，在 vite 中并没有这样的包。于是就有了下面的操作。 解决方法 对于所有动态拼接的路径，只要不是纯字符串的，就需要使用下面的方式。 Glob 在 vite 中，提供了 Glob 导入功能，可…

最近在升级项目，用到了TypeScript，简单总结一下JS转TS，尤其是在vue中的使用方式。 基础语法 对于TS的基础语法，这里就不多介绍了，看官网即可，毕竟巨硬的文档可以秒杀一众系列丛书。 放个链接： TypeScript文档 TypeScript中文文档 上面是英文官方的，保持了最新。下面好像也是官方的，但是不是最新，不过没关系，大体都差不多的。 编写 ts 文件 TypeScript文件以.ts结尾，在内容书写上基本按照 JavaScript 格式即可，需要注意有些地方需要显式的给出类型声明，比如： fu…

基于Vue的Gantt组件 工作需要，要实现甘特图，之前实现了一版，但是有些问题，干脆撸一个单独的组件出来，打包封装直接使用，这样也更加灵活。 虽然不比专业的，但是小功能足够用了，展示，拖动，后续可能会添加新功能。 话不多说，直接上图。 功能 树形数据结构展示，支持动态增减 自定义左侧表格的列内容 自定义右侧甘特条的内容 任意拖动甘特条以修改时间 更多功能，可以查看文档。 使用 组件已经发布到 npm，使用 npm 或者 yarn 都可以下载安装。 安装： npm install jz-gantt --save #…

今天突然发现 template 块中的提示和高亮都没有了。之前也没在意，就百度了一下，结果根本没有一个管用的。 解决方案 前提是：需要安装 Vetur 插件，就是这个货： 我挨个看了一下 Vetur 的配置，还是自己动手找比较靠谱。 在 文件 > 首选项 > 设置 ，设置页面中找到 扩展 > Vetur，在右侧找到 Experimental: Template Interpolation Service 这个选项，勾上 √ 即可。 没有其他操作，不需要有的博客说的什么配置 Emmet 之类的，通通…

之前项目是用到了axios，它本身是对ajax的二次封装。不过我们在使用的时候经常是对axios再进行二次封装，从而达到我们需要的效果。现在把代码整理了一下，贴上来。 首先，安装axios： npm install axios 还有一个qs是格式化参数用的，如果不需要，可以不用，直接拼接也可以。 /* * @Author: JeremyJone * @Date: 2020-03-03 17:58:23 * @LastEditors : JeremyJone * @LastEditTime : 2020-03-03 …

作为Vue的状态管理工具，Vuex的使用率相当之高。Vuex具有4个属性，state，getters，actions，和mutations。 今天来讨论一下getters。它相当于vue的computed计算属性。每当state中的值变化时，它也会自动更新。这个在我们需要那些稍微对state中的属性进行改造的属性时很有帮助。在实际生产中，我们会大量使用getters，而state会相对较少。 getters的基本用法，直接调用 首先在根目录下创建一个store.js： import Vue from "v…

因为下载还是挺常见的，所以用axios封装了一下，直接调用即可。 很简单的封装，一般情况下，只需要传入文件路径，文件名，和文件的mime类型即可。 /** * Encapsulate Download methods, download files. * @param url * @param filename * @param filetype: file mime type * @param config: header config, a object * @returns {Promise} */ expo…

之前写的画板里面，我将它升级了一下，首先可以传入一张默认图片，然后所有操作都是基于该图片进行操作。然后我发现，当使用橡皮擦的时候，它直接将整个canvas擦成了透明。 这是因为canvas每次只能展示一张图片，这个在之前说过，有兴趣的朋友可以参考之前的文章。 于是有了很简单的想法，在擦除完成后，首先在canvas中加载原始图片，然后加载擦除后的图片，这样重叠合并成一张完整的擦除后的效果图。 有了想法，动手做： // 首先保存擦除的图片 let eraserPic = new Image(); eraserPic.s…

动态获取浏览器大小，可以动态调整页面布局，让页面更加灵活。 JS获取浏览器高度： var width=document.documentElement.clientWidth; var height=document.documentElement.clientHeight; 原生JS动态获取浏览器大小改变使用onresize： window.onresize = function(){ alert(document.documentElement.clientHeight); } Vue组件中动态获取高度，使用如…

vuex为我们提供了状态管理的解决方案，其最基本的结构如下： 在main.js层级下创建一个store.js文件，写入： 然后导入main.js并注册： 这样，最基本的vuex就可以使用了。 随着actions和mutations中的方法越来越多，文件越来越臃肿，我们会觉得越来越不好用。 那么就需要对vuex进行模块化处理。 实现的层级方案，分别是箭头对应的关系： 在子文件夹中分别写入对应的属性和方法，并在*.module.js中注册，以shot为例： 另外说一下，有新人对ES6语法不熟悉，稍微讲一下导入语法，如果…