Vue3 的 script setup 语法糖是真的爽

还记得刚体验 script setup 语法糖的时候,编辑器提示我这是一个实验性的提案,要使用的话,需要固定 Vue 版本。而在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,你可以继续使用但仍会有实验性提案的提示,在 v3.2 中,才会去除提示并移除一些废弃的 API。script setup 是个啥?它是 Vue3 的一个新语法糖,在 setup 函数中。所有 ES 模块导出都被认为

- 阅读全文 -

PIXI.JS 点击获取当前坐标

PIXI Canvas 点击事件如下​ onMounted(() => { console.log('mounted') app.renderer.plugins.interaction.on('pointerdown', (event: PIXI.InteractionEvent) => { let ax = event.data.get

- 阅读全文 -

前端自动化构建工具 ---- Plop

plop:可以通过命令行去生成、处理文件模板代码等.使用条件参考:项目的每个模块的结构骨架都非常相似,引入模版内容相同就可以使用Plop来实现自动化了,Plop旨在根据模板文件自动化创建组件。受制于Vue语法限制以及vscode失败的拆件,采用了plop 自动化构建模版安装plop安装到项目npm install --save-dev plop全局安装plop(可选,建议安装方便使用)npm in

- 阅读全文 -

vue3使用reactive包裹数组如何正确赋值

需求:将接口请求到的列表数据赋值给响应数据arrconst arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败,直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr.concat(res); // 方

- 阅读全文 -

手把手教你使用Electron9+vue3开发跨平台桌面应用

Electron 是一个基于 chromium 和 nodejs,可以使用 HTML、CSS、和 JavaScript 构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然 B/S 是膜前开发 ad 主流,但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用在无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,加上 web 开发成本低

- 阅读全文 -

Vue3 404页面(NotFond)配置方案

全部捕获/ 404未找到路线常规参数只会匹配网址片段之间的字符,并用分隔/。如果我们想匹配任何东西,我们可以使用自定义参数正则表达式,方法是在参数后面紧随括号内添加正则表达式:const routes = [ // will match everything and put it under `$route.params.pathMatch` { path: '/:pathMatch(.*

- 阅读全文 -

做了一夜动画,就为让大家更好的理解Vue3的Composition Api

做了一夜动画,就为让大家更好的理解Vue3的Composition Api回顾Option Api在了解Composition Api之前,首先回顾下我们使用Option Api遇到的问题,我们在Vue2中常常会需要在特定的区域(data,methods,watch,computed...)编写负责相同功能的代码。Option Api的缺陷随着业务复杂度越来越高,代码量会不断的加大;由于相关业务的

- 阅读全文 -

如何将Vue3.0项目部署到Heroku

作为一个专业薅羊毛的人,连Github Education都不放过的人励志将每个权益发挥到极致本篇文章介绍如何将Vue项目发布到Heroku,当然本文以Vue为例,还可以部署React或者其他的web项目,当然如果你需要,后端服务也可以Heroku平台Heroku平台的灵活性极高且支持多种编程语言。若想把程序部署到Heroku上,开发者要使用Git把程序推送到Heroku的Git服务器上。在服务器

- 阅读全文 -

vue-axios 是如何用100行代码换取GitHub1.7KStar

最近vue3.0 逐渐进入视线,想配置一个自己的模版,于是又从最简单的开始了安装axiosaxios已经被大家所熟知,但是当我重新回头看配置axios的时候发现仍有一些东西值得思考网上对Vue安装axios版本很多,大致有几个在main引入并挂在全局在文件 main.ts 添加 带有 + 符号后代码// main.ts import { createApp } from "vue&qu

- 阅读全文 -

Vue3.x和Vue2.x的不同之处

Vue3.x和Vue2.x的不同点1、main.js引入方式不一样// vue3 //code by www.joynop.com import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') // 没有全局的Vue// vue2.X //code by www.joynop.co

- 阅读全文 -

双击鼠标左键选中模型并显示信息

双击鼠标左键选中模型并显示信息。坐标系的概念首先,解释一下三种坐标系的概念:场景坐标系(世界坐标系)、屏幕坐标系、视点坐标系。场景坐标通过three.js构建出来的场景,都具有一个固定不变的坐标系(无论相机的位置在哪),并且放置的任何物体都要以这个坐标系来确定自己的位置,也就是(0,0,0)坐标。例如我们创建一个场景并添加箭头辅助。屏幕坐标在显示屏上的坐标就是屏幕坐标系。如下图所示,其中的clie

- 阅读全文 -

通过引入模型文件实现3d展示

ThreeJS 官方提供了DRACOLoader GLTFLoader MMDLoader MTLLoader OBJLoader OBJLoader2 PCDLoader PDBLoader PRWMLoader SVGLoader TGALoader本次实验使用的是GLTF格式注意:实验demo 仅参考了现有gltf模型可行性,若非gltf格式模型,尽可能转换为gltf或上

- 阅读全文 -