项目代码同步至码云 weiz-vue3-templatepina 是 vue3 官方推荐的状态管理库，由 Vue 核心团队维护，旨在替代 vuex。pina 的更多介绍，可从 pina官网 查看 特点 更简洁直接的 API，提供组合式风格的 API 支持模块热更新和服务端渲染 对TS支持更为友好 安装1npm i pinia 使用1. 创建实例src目录下新建store文件夹，并新建index.ts文件12345import { createPinia } from 'pinia'const store = createPinia()export default store 2. 使用实例在main.ts里引入并使用12345678import { createApp } from 'vue'import pinia from '@/store'import './style.css'import App from './App.vue'im ...

项目代码同步至码云 weiz-vue3-templateVue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。 1. 安装1npm i vue-router@4 2. 集成1. 新建两页面进行示例在src/view下新建home.vue和login.vue，内容如下：1234567891011<script setup lang="ts">defineOptions({ name: 'V-home'})</script><template> <div>home page</div></template><style scoped></style>login.vue里修改下对应name即可 2. src下新建router文件夹index.ts作为路由入口，static.ts作为静态路由，modules内还可以放入其他类型路由，整体目录结构如下：123 ...

之前的截图工具是 snipaste，最新发现 PixPin，截图功能更加强大。 下载和安装PixPin官网下载即可 特色功能1. 长截图不再局限于屏幕尺寸，使用长截图智能拼接算法，截取更长更宽的图像选定窗口后，点击长截图按钮，点击开始图标，然后滚动屏幕，右侧自动显示预览图，点击停止按钮，停止后保存即可当前使用还存在一些小问题，不过值得期待 2. 贴图很多时候需要切屏来查看浏览器与编辑器，有了贴图之后，再也不用切屏了选定窗口后，点击下方操作栏的固定到屏幕按钮，即可实现贴图 3. 丰富的标注丰富的标注工具，包括序号、文字、箭头、线条、马赛克等，满足你的日常需求 4. 文本识别通过强大的文本识别算法，迅速准确地识别出图像上的文字贴图之后，可随意选择贴图中的文字，进行复制操作 5. 截动图把屏幕的操作记录在动图上，录制的同时还可以同时使用标注工具选定窗口后，选择gif截图按钮，点击开始按钮即可录制，点击停止按钮，即可保存 更多细节功能，可自行体验

项目代码同步至码云 weiz-vue3-template要求代码规范，主要是为了提高多人协同和代码维护效率，结合到此项目，具体工作就是为项目配置 eslint 和 prettier。 editorconfig安装 EditorConfig for VS Code 插件，根目录下新建 .editorconfig 文件，增加以下配置1234567[*.{js,jsx,ts,tsx,vue}]indent_style = spaceindent_size = 2end_of_line = crlftrim_trailing_whitespace = trueinsert_final_newline = truemax_line_length = 120如果是非windows系统，end_of_line 设置为 cr eslint安装可以参考官方教程 vue.js代码规范。在这里，我们建议使用另一种方式，安装后，通过命令初始化。 1. 安装1npm i eslint -D 2. 初始化1npm init @eslint/config 以下是操作实例：1234567891 ...

近日刚看到 hexo-theme-butterfly 升级到 4.11.0 版本了，更新文档里说明已支持 hexo7.0.0，于是升级作此记录 1. 定位到hexo博客根目录下, 运行 hexo -v, 查看当前版本123PS D:\workspace\blog\github-blog> hexo -v INFO Validating confighexo: 6.3.0 2. npm i hexo-cli -g, 全局安装 hexo-cli12345PS D:\workspace\blog\github-blog> hexo -v INFO Validating configINFO# ……hexo: 6.3.0 3. npm install -g npm-check, 安装 npm-check，若已安装可以跳过12345678910PS D:\workspace\blog\github-blog> npm install -g npm-checkadded 361 packages, and audited 363 packages in 56s ...

hexo-butterfly-recommend 是基于 hexo-theme-butterfly 主题的扩展插件，主要给博客首页添加导航和推荐功能 效果展示默认 屏幕宽度 <= 1200 移动端 安装1npm i hexo-butterfly-recommend --save 升级1npm update hexo-butterfly-recommend --save 配置将以下配置添加到 _config.butterfly.yml 或 _config.yml 文件中。 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283recommend: enable: true #开关 priority: 5 #过滤器优先权 默认10，值越低过滤器越早执行 enable_page: / #应用页面 /是首页，al ...

本文利用向量的点积和叉积来判断点是否在线段上。基础知识补充 从零开始的高中数学——向量、向量的点积、带你一次搞懂点积（内积）、叉积（外积）、Unity游戏开发——向量运算（点乘和叉乘 说明点积可以用来判断两个向量的夹角，如果这个夹角是0或者180度，说明这个点在直线上；叉积可以用来判断一个点到一条直线的距离，如果这个距离是0，说明这个点在直线上。 假设有a、b、c三点，其中a和b是线段的两个端点，c是要判断的点： 计算向量ab和ac的点积，记为dot。 如果dot小于0，说明c在ab的垂直平分线上； 如果dot等于ab的模长的平方，说明c在ab的延长线上； 如果dot在0和ab的模长的平方之间，说明c在ab的方向上，可能在ab线段上； 如果dot小于0或者大于ab的模长的平方，说明c不在ab的直线上，也不在ab线段上。 计算向量ab和ac的叉积，记为cross。 如果cross不等于0，说明c不在ab的直线上，也不在ab线段上； 如果cross等于0，说明c在ab的直线上。 当判断出c在ab的直线上时，还需要判断c的x坐标或者y坐标是否在a和b的x坐标或者y坐标之 ...

项目代码同步至码云 weiz-vue3-template关于vite的详细配置可查看 vite官方文档，本文简单介绍vite的常用配置。 初始内容项目初建后，vite.config.ts 的默认内容如下：1234567import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()],}) 配置别名1. 安装 @types/node1npm i @types/node -D 2. 修改 vite.config.ts1234567891011121314151617181920212223import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue&# ...

项目代码同步至码云 weiz-vue3-template关于tsconfig的配置字段可查看其他文档，如 typeScript tsconfig配置详解 tsconfig.json文件修改如下:1234567891011121314151617181920212223242526272829303132333435363738394041424344454647{ "compilerOptions": { "target": "ESNext", // 将代码编译为最新版本的 JS "useDefineForClassFields": true, "module": "ESNext", // 使用 ES Module 格式打包编译后的文件 "lib": ["ESNext", "DOM", "DOM.Iterable"], // 引入 ES 最 ...

项目代码同步至码云 weiz-vue3-template 前提准备1. node版本Node.js版本 >= 12，如果有老项目需要旧版本的，推荐用 nvm 管理node版本。1234567PS C:\Users\Administrator> nvm --version1.1.11PS C:\Users\Administrator> nvm list * 16.20.2 (Currently using 64-bit executable) 14.21.1PS C:\Users\Administrator> nvm use 14.21.1Now using node v14.21.1 (64-bit) 2. vscode推荐使用 vscode 编辑器，安装插件以下插件：EditorConfig for VS Code， Volar，TypeScript Vue Plugin，Prettier - Code formatter，ESlint 项目初始化1. 创建1npm create vite@latest vue3project -- --templ ...