Vite4+Typescript+Vue3+Pinia 从零搭建(6) - 状态管理pina
项目代码同步至码云 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 ...
Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router
项目代码同步至码云 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 ...
PixPin - 新截图工具
之前的截图工具是 snipaste,最新发现 PixPin,截图功能更加强大。
下载和安装PixPin官网下载即可
特色功能1. 长截图不再局限于屏幕尺寸,使用长截图智能拼接算法,截取更长更宽的图像选定窗口后,点击长截图按钮,点击开始图标,然后滚动屏幕,右侧自动显示预览图,点击停止按钮,停止后保存即可当前使用还存在一些小问题,不过值得期待
2. 贴图很多时候需要切屏来查看浏览器与编辑器,有了贴图之后,再也不用切屏了选定窗口后,点击下方操作栏的固定到屏幕按钮,即可实现贴图
3. 丰富的标注丰富的标注工具,包括序号、文字、箭头、线条、马赛克等,满足你的日常需求
4. 文本识别通过强大的文本识别算法,迅速准确地识别出图像上的文字贴图之后,可随意选择贴图中的文字,进行复制操作
5. 截动图把屏幕的操作记录在动图上,录制的同时还可以同时使用标注工具选定窗口后,选择gif截图按钮,点击开始按钮即可录制,点击停止按钮,即可保存
更多细节功能,可自行体验
Vite4+Typescript+Vue3+Pinia 从零搭建(4) - 代码规范
项目代码同步至码云 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记录
近日刚看到 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-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 ...
JS判断点是否在线段上
本文利用向量的点积和叉积来判断点是否在线段上。基础知识补充 从零开始的高中数学——向量、向量的点积、带你一次搞懂点积(内积)、叉积(外积)、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坐标之 ...
Vite4+Typescript+Vue3+Pinia 从零搭建(3) - vite配置
项目代码同步至码云 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 ...
Vite4+Typescript+Vue3+Pinia 从零搭建(2) - ts配置
项目代码同步至码云 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 最 ...
Vite4+Typescript+Vue3+Pinia 从零搭建(1) - 项目初始化
项目代码同步至码云 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 ...