🐟

Make Web Greater

前端踩坑记录及小技巧

踩坑 vant-ui与Vue引入顺序 使用cdn引入vant和vue需要注意顺序,官方文档实例: #vue需要在vant之前引入 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script> webpack中的publicPath 在某个Vue项目中,线上路径是http://xxxx.com/app, 本地dev环境下开发路径为http://localhost/app, 提示许多静态资源(js、css文件)加载失败。排查过后发现是webpack中dev模式下的publicPath没有设置导致的。将该属性设置为’/app’即可正常加载静态资源。 在新版本的Vue中该属性在项目根目录下的vue.config.js文件中设置 #vue.config.js module.exports = { publicPath: '/my-app', outputDir: 'dist2' } 技巧 手机号正则 let reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/; reg.test(phoneNumber) #符合返回true,不符合返回false 邮箱正则 let reg = /^([a-zA-Z]|[0-9])(\w|\-)[email protected][a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; reg.test(email) #符合返回true,不符合返回false 获取URL参数 #传入要获取的参数名 function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg);//search,查询?后面的参数,并匹配正则 if(r!=null)return decodeURI(r[2]); return null; } 移动端进行控制台调试 在head标签里加入 <script src="https://cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script> <script>eruda.init();</script> CSS-超出div用…替代 在css样式中加入 text-overflow:-o-ellipsis-lastline; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp:1; -webkit-box-orient: vertical; 前后效果对比

十二月 17, 2020 · 1 分钟 · yuyin

git常用操作总结

clone # 克隆远程master分支到本地 git clone <origin-url> # -b:克隆远程指定分支到本地 git clone -b <origin-branch> <origin-url> 删除分支 # 删除本地分支 git branch -d <branch-name> # 删除远程分支 git push origin --delete <branch-name> stash > stash用于跨分支保存和恢复修改记录 # 保存 git stash save <message> # 查看保存列表 git stash list [email protected]{0}: On master: test # 恢复修改,可以跨分支 git stash pop [email protected]{0} push # 强制push git push origin master -f 远程仓库 # 查看远程仓库 git remote -v # 设置远程仓库 git remote add origin <origin-url> # 修改远程仓库 git remote set-url origin <origin-url> git config vim ....

六月 17, 2021 · 1 分钟 · yuyin

前端项目规范化改造

前言 前端项目的规范一般分为代码格式规范与Git commit规范,代码格式规范一般使用Eslint,Prettier来实现,git commit规范则使用Commitizen来实现。为了能在git hooks中自动执行这2个检查,又会引入Husky、Lint-stage和commitlint。它们之间的关系如下图: 本文对这几种工具的安装与联动进行了详细说明。 Prettier Prettier 是一个流行代码格式化工具。 安装依赖 pnpm add -D prettier script { "script":{ "format:code": "prettier --write \"src/**/*.(vue|js|ts|css|scss)\"" } } 配置文件 // .prettierrc.js module.exports = { printWidth: 80, // 换行字符串阈值 tabWidth: 2, // 设置工具每一个水平缩进的空格数 useTabs: false, semi: false, // 句末是否加分号 vueIndentScriptAndStyle: true, singleQuote: true, // 用单引号 trailingComma: 'none', // 最后一个对象元素加逗号 bracketSpacing: true, // 对象,数组加空格 arrowParens: 'always', // (x) => {} 是否要有小括号 requirePragma: false, // 不需要写文件开头的 @prettier insertPragma: false // 不需要自动在文件开头插入 @prettier }; Eslint Eslint是一个可组装的JavaScript和JSX检查工具...

四月 29, 2022 · 2 分钟 · yuyin

Vue组件事件存在默认参数问题

第三方组件 在Vue中使用组件时,有时会遇到组件存在默认参数这种情况,如: <template> <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f" :headers="{ 'naive-info': 'hello!' }" :data="{ 'naive-data': 'cool! naive!' }" :custom-request="customRequest" > <n-button>上传文件</n-button> </n-upload> </template> <script lang="ts"> export default defineComponent({ setup () { const customRequest = ({ file, data, headers, withCredentials, action, onFinish, onError, onProgress }: UploadCustomRequestOptions) => { }) } return { customRequest } } }) </script> n-upload组件中的custom-request事件存在默认参数,这时如果想要传递一个自定义参数,一般的做法会覆盖掉这个默认参数,解决方法是使用箭头函数进行二次参数传递。 <template> <n-upload :custom-request="(event) => customRequest(event, args)"> </n-upload> </template> <script> export default defineComponent({ setup () { const customRequest = ({ file, data, headers, withCredentials, action, onFinish, onError, onProgress },args) => { }) } return { customRequest } } }) </script> 原生组件 对于HTML原生组件,如Input、Button等,则可以使用$event来获取组件的原生参数。如:...

三月 31, 2022 · 1 分钟 · yuyin

Vite打包时注入时间字符串到Vue模板中

有时,我们希望在访问生产环境网页时可以看到上一次构建的一些信息,如构建版本,构建时间等。下面介绍如何使用Vite达成这种效果。 在vite.config.js中使用define定义一个全局变量 # vite.config.js defineConfig({ define:{ __BUILD_TIME__: JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss')) } }) 在Vue文件中使用 <template> {{ BUILD_TIME }} </template> <script setup> const BUILD_TIME = __BUILD_TIME__ </script>

三月 29, 2022 · 1 分钟 · yuyin

WSL2设置clash代理

windows clash设置 clash core + yacd 构建 yacd,将构建产物放到clash配置文件夹中并重命名为ui。增加以下配置到config.yaml文件中 external-ui: ui 设置clash core自启动,创建一个vbs文件,内容如下: Dim WShell Set WShell = CreateObject("WScript.Shell") WShell.Run "D:\program\clash-windows-386.exe", 0 Set WShell = Nothing win+R,输入shell:startup打开启动目录 将vbs文件放到该目录即可实现开机自启clash core 通过访问http://127.0.0.1:9090/ui/打开clash面板 WSL2代理设置 1.找到WSL2与windows通信的IP cat /etc/resolv.conf # nameserver 172.x.x.x export ALL_PROXY="http://172.x.x.x:7890" 2.由于这个Ip是动态生成的,可以写一个脚本动态获取 #set_proxy.sh #!/bin/bash host_ip=$(cat /etc/resolv.conf |grep "nameserver" |cut -f 2 -d " ") export ALL_PROXY="http://$host_ip:7890" 3.再将这个脚本放到.zshrc中 #.zshrc source ~/script/set_proxy.sh

三月 6, 2022 · 1 分钟 · yuyin

如何Vue3中给元素绑定ref

在Vue2中,元素的ref属性可以通过$ref获取,示例代码: <template> <input ref="inputRef" /> </template> <script> ... mounted:{ this.$ref['inputRef'].focus() } ... </script> Vue3的组合式API移除了$ref,写法改为如下: <template> <input ref="inputRef" /> </template> <script setup> ... const inputRef = ref(null) onMounted(() => { inputRef.value.focus() }) ... </script> 在v-for中循环绑定ref <div v-for="item in list" :ref="setItemRef"></div> <script setup> ... let itemRefs = [] const setItemRef = (el) => { if(el) { itemRefs.push(el) } } ... </script> 在ref绑定到reactive中 <input :ref="(el) => (inputRefs['input1Ref'] = el)" /> <input :ref="(el) => (inputRefs['input2Ref'] = el)" /> <script setup> let inputRefs = reactive({ input1Ref: null, input2Ref: null }) onBeforeUpdate(() => { itemRefs = [] }) </script>

二月 23, 2022 · 1 分钟 · yuyin

hexo迁移至hugo

先说一下为啥要从hexo迁移至hugo,并不是因为hexo不好用,而是发现了hugo里PaperMod这个主题,很对我的审美,于是决定将站点从hexo迁移至hugo。 安装Hugo 由于我的开发环境为Ubuntu,一开始使用apt下载hugo,结果下载下来的版本太低,在后续遇到了许多问题。后面直接通过官方的Release列表找到对应的版本进行安装。 # 下载安装包 http --download https://github.com/gohugoio/hugo/releases/download/v0.92.0/hugo_0.92.0_Linux-64bit.deb # 进行安装 sudo dpkg -i hugo_0.92.0_Linux-64bit.deb 生成站点 与Hexo类似,Hugo也是先用命令行初始化一个基础框架,然后再将一个主题源代码Clone至themes文件夹下,不同的是Hugo并没有提供一个默认的主题。 详细的操作可以看官方文档 文章迁移 Hugo的文章保存在/content/post/目录下,直接迁移至此处就行。 这里遇到了一个问题,之前在Hexo中某些markdown的头部信息(Front Matter)中有Cover字段,导致主题渲染报错,删去之后问题解决. Github Actions 之前的Hexo是用github actions自动部署的,于是找了一下hugo的action脚本,果然也有,详细可以看这篇文章 Hugo对比Hexo 运行环境 Hexo是基于NodeJS的,所以必须要安装NodeJS运行环境。而Hugo是用Golang开发,最终是一个二进制可执行文件,不需要用户安装Go运行环境。 编译速度 Hugo的介绍是The world’s fastest framework for building websites.这点确实名副其实。 在编译速度上,Hugo比Hexo要快出许多,不管是热重载以及打包,Hugo几乎可以在瞬间完成。 社区 由于种种原因,Hugo在国内的流行程度不及Hexo,但是在全球范围是应该是Hugo更加流行,这点可以从Github Star数看出来。 由于用户基础的不同,在国内,Hexo有完整的中文文档可以参考,Hugo的中文文档都是残缺不全的,在使用上会有一定的门槛。 最后 在使用PaperMod这款主题的时候,发现中文化不是很完善,于是提了一个PR。

一月 21, 2022 · 1 分钟 · yuyin

github actions配置备份

NodeJS 适用于 Hexo,Vue 等框架 name: Deploy GitHub Pages # 触发条件:在 push 到 master 分支后 on: push: branches: - hexo # 任务 jobs: build-and-deploy: # 服务器环境:最新版 Ubuntu runs-on: ubuntu-latest steps: # 拉取代码 - name: Checkout uses: actions/[email protected] with: persist-credentials: false # 生成静态文件 - name: Build run: | yarn install yarn build # 部署到 GitHub Pages - name: Deploy uses: JamesIves/[email protected]/v3 with: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} BRANCH: gh-pages FOLDER: ./public hugo name: hugo-deploy # 名字自取 on: push: branches: - hugo jobs: deploy: runs-on: ubuntu-18....

一月 20, 2022 · 1 分钟 · yuyin

WSL常用命令

WSL(适用于windows的Linux子系统)常用命令 wsl -l -v 列出所有已安装的linux发行版 wsl –set-default-version 修改后续安装的linux发行版使用的WSL版本 wsl –set-version 修改已安装的linux发行版使用的WSL版本 wsl -t 关闭指定的linux子系统 wsl –shutdown 关闭所有的linux子系统

十二月 2, 2021 · 1 分钟 · yuyin