Vue 3.2 + Typescript + Pinia + Vite + Element-Plus Geeker-Admin 🍇🍈🍉 一、在线访问地址：http://admin.spicyboy.c

关于 rollupjs 的教程已经非常多了，可是较少看到比较完整的工程样板，所以分享下我自己搭建的，已经在公司内部使用的样板工程。 如果是 typescript 写的，那就还要再加几个，怀念几年前 Happy Coding 的日子😀。 因为要支持 nodejs 与浏览器，所以…

最近在 H5 开发与 APP 客户端工程师的联调过程中， 经常需要实现一些常用的移动端事件封装成接口提供给客户端，例如用户的单击 tap 事件、双击事件、长按事件以及拖动事件。但由于浏览器默认只提供了 touchstart、touchmove、touchend 三个原生事件，在…

通过 rollup 打包后的代码，相比与 webpack 打出来的包体积会更小，而且代码会更加简洁，不会有过多的冗余代码。 所以说 rollup 更适合构建一个组件库。rollup 和 webpack 的具体对比，本文章就不做扩展了。 lib 包是经过 tsc 命令 打包出来的…

rollup 采用 es6 原生的模块机制进行模块的打包构建，rollup 更着眼于未来，对 commonjs 模块机制不提供内置的支持，是一款更轻量的打包工具。rollup 比较适合打包 js 的 sdk 或者封装的框架等，例如，vue 源码就是 rollup 打包的。而 w…

当新建项目的时候，我们通常需要设计目录结构、配各种配置、处理打包编译，而且每次新建都要重来一遍，或把原来的项目 copy 一份再改改。那能不能自己写个模板，然后还可以支持个性化自动创建呢？今天我就来和大家一起分享如何定制一套自己的项目脚手架，提升开发效率。 这里需要引入脚手架的…

建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

脚手架能够帮我们自动生成包含本地调试、编译、打包、发布等工具的项目目录，使我们能够减少大量重复劳动的同时，遵循一定的开发规范，大大提升我们的开发、协同效率。 下文中出现的 generator 统一代指 yeoman 脚手架生成器。 yeoman 脚手架生成器（generator…

实现一个脚手架之前我们必须知道什么是脚手架？通俗来说脚手架就是帮我们自动完成一些重复做的内容，比如大名鼎鼎的Vue脚手架Vue-Cli,只需要执行一行代码就能帮我搭建好Vue环境的项目，它帮我们自动创建了一个Vue的开发环境项目，我们不需要每次都自己搭建环境了。 Yeoman是…