技术开发分享录
没想到纯CSS还可以实现打字效果

鼠标悬浮这里: <style> .zh-typing { position: relative; width: 26ch; height: 22px; animation: typing 3s steps(15, end); animation-f...

webStyle_虎_ 2022-05-25 10:51 26 css
vue3.x几个不看不知道的自动化加载技巧

## 前言 最近鼓捣了一下 Vue3 + Vite2,遇到了不少问题,整理了5个可以提高开发效率的小知识,让你在 Vue3 的项目开发中更加丝滑、顺畅。 ## 一、setup name 增强 Vue3的 `setup` 语法糖是个好东西,但使用 `setup` 语法带来的第一个问题就是无法自定...

webStyle_虎_ 2022-05-20 09:39 60 vue
ES6模块化改变前端的原生开发方式

ES6推出的模块化,使用方式有点类似 `require.js`,只需要引入一个入口文件即可,其他的js文件可以按功能创建及引入,`export` 导出方法属性,然后 `import` 引入使用,这个新特性可能在未来会引来原生开发的热潮,不需要三方框架(vue、react)即可自由使用模块化开发,而且...

webStyle_虎_ 2022-05-19 10:40 41 javascript
一个你想不到的小程序数组更新方式

首先这里不得不吐槽下小程序的数组更新,直接通过 `setData` 替换整个数组只在开发者工具上有效果,放到真机上就完全失灵,这是一件很蛋疼的事情,不知道小程序官方团队的更新机制是什么,也没有去细看,猜测可能与引用类型有关系。 看了网上大都是指定修改数组对象里的某个元素值,如这样: ``` Pa...

webStyle_虎_ 2022-05-18 10:39 40 小程序
vue3.x页面功能拆分方式

vue3.x相对比vue2.x主要的应用区别在于`setup`的使用,这个也是vue3.x的特色,所有的功能都得通过vue钩子引入使用,因为 `setup` 语法糖环境是不支持 `this` 的,这种开发方式有点回到原始的感觉,针对小项目还好,但如果页面模块功能复杂,如果都放到一个文件里堆叠,不仅会...

webStyle_虎_ 2022-05-16 10:07 87 vue
Vue3.x项目开发常用知识点

PS:以下知识点都是基于 `vue3.x + typescript + element-plus + setup语法糖` 使用的。 ## 一、定义组件属性 ``` const props = defineProps({ visible: { type: Boolean, de...

webStyle_虎_ 2022-05-11 09:54 104 vue
记一次密码强度处理

需求示例:密码长度不能低于8位,包含大写字母、小写字母、数字、字符中的至少两种 ``` function verifyPassword(password) { return /.{8,}/.test(password) && [ /[`~!@#$%^&amp...

webStyle_虎_ 2022-05-06 17:46 106
宝塔部署node项目,使用pm2进行管理

到宝塔面板网站模块下安装指定版本node(如:`v14.19.2`),别忙添加项目,因为没有进行持久化进程管理,还需要到软件商店下载pm2,然后到pm2面板选择前面安装好的node版本(不选择会找到不npm和pm2命令),再进行pm2的项目添加,选择事先编辑好的`ecosystem.config....

webStyle_虎_ 2022-05-06 12:43 94
npm国内镜像加速

原镜像:`https://registry.npmjs.org/` ## 一、修改成腾讯云镜像源 1、命令 ```shell npm config set registry http://mirrors.cloud.tencent.com/npm/ ``` 2. 验证命令 ```shell...

webStyle_虎_ 2022-05-05 10:36 96 npm
npm修改全局安装路径

查看npm配置 ```cli > npm config ls ``` 修改全局安装路径 ```cli > npm config set prefix "C:\Users\xxx\AppData\Roaming\npm" ``` 修改全局缓存路径 ```cli...

webStyle_虎_ 2022-04-28 18:57 80
vue3.x axios解决Content type 'application/x-www-form-urlencoded;charset=UTF-8' 不支持问题

出现这个问题,主要还是因为记错了后端具体使用的是什么内容类型来接收前端 `POST` 传输参数,所以只要知道了后端采用的内容类型就可以很好的解决问题,如后端是通过 `application/json`,就可如下处理: ``` const result = axios.post('user...

webStyle_虎_ 2022-04-27 14:22 128 vue axios
如何有效的删除数组中符合条件的值?

项目开发比较常见的是删除数组中指定索引的值,代码如下: ``` let arr = [1, 2, 3, 4, 5, 6, 7, 8] for(let i=0,len=arr.length; i < len-1; i++) { if(i === 2) { // 删除索引为2的值 ...

webStyle_虎_ 2022-04-22 16:58 182 javascript
vue3.x从打包、部署到上线

## 一、前言 作者采用的项目架构:`vue3.x + typescript + element-plus + axios`,知道这一点很重要,因为目前 `vue3.x` 和 `element-plus` 还在不断更新迭代中,可能后面又会有所变化,导致具体的解决方案也会跟着改变。 具体版本: ...

webStyle_虎_ 2022-04-21 18:39 232 vue
vue3.x路由404通配处理

## vue-router3.x通配规则 vue2.x对应的vue-router3.x的404路由通配方式: ``` { path: '*', // 会匹配所有路径 name: '404', component: () => import(&#3...

webStyle_虎_ 2022-04-21 15:51 116 vue
nuxt.js路由拦截

首先在 `nuxt.config.js` 中添加[路由拦配置](https://www.nuxtjs.cn/api/configuration-router) ``` export default { router: { middleware: 'router-interce...

webStyle_虎_ 2022-04-04 18:01 132
shadow DOM介绍及使用

Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净、整洁。其中,Shadow DOM 接口是关键所在,它可以将一个隐藏的、独立的 DOM 附加到一个元素上。本篇文章将会介绍 Shadow ...

webStyle_虎_ 2022-03-28 11:39 212 html
vue3.x+ts+vite2环境变量配置

在做项目环境变量配置前,可以先到官网回忆一下环境变量的基本使用,https://cn.vitejs.dev/guide/env-and-mode.html ## 一、环境模式 首先环境变量是可以分模式的,常用模式如下: ```txt .env # 所有情况下都...

webStyle_虎_ 2022-03-24 09:58 362 vue
找不到模块“@/plugins/axios”或其相应的类型声明解决

这是一个vue3+ts的项目,在使用别名@所报的vscode编辑器错误,但并不影响使用,只不过看着烦,想要解决这个问题,不仅需要在vite.config.js中配置: ``` import { resolve } from 'path' export default ({ mod...

webStyle_虎_ 2022-03-23 18:22 346
nuxt.js项目pm2部署

首先在使用 pm2 之前,先用普通的 `npm start` 运行是否成功,如果成功了再考虑通过 pm2 进程管理部署。 在进行部署之前需要先打包下项目: ``` npm run build ``` 然后把以下目录文件copy到服务器中 ```dir ├─ ProjectName ├...

webStyle_虎_ 2022-03-11 21:45 234 nuxt.js
nginx location匹配规则

**语法:** ```nginx location [=|~|~*|^~] /uri/ { # ... } ``` **规则:** - / 开头表示通用匹配(任何请求都会匹配到) - = 开头表示精确匹配 - ^~ 开头表示uri以某个常规字符串开头(如url路径) - ~ 开头表示区...

webStyle_虎_ 2022-02-17 15:37 207 nginx
{{ v.title }}

{{ v.content }}

{{ v.nickname }} {{ formatTime(v.create_time) }} {{ v.read_num }} {{ formatTag(v2) }}