来自分类 Vue2023-03-15 17:36:10
### 1. 在 vite.config 里定义所需要的数据
```javascript
import path from 'node:path'
// ...
const vmDesignWidth = 3840 // 设计稿宽度
const vmDesignHeight = 1080 // 设计稿宽度
const minWindow = '1920Px' // 兼容最小宽度
const vmFontsize = 100
export default ({ mode }) => {
//...
}
```
### 2. 在 vite.config 里将定义的数据作为额外数据给 scss
```javascript
css: {
preprocessorOptions: {
scss: {
additionalData: `
$vmDesignWidth: ${vmDesignWidth};
$vmDesignHeight: ${vmDesignHeight};...
来自分类 其他2023-02-17 14:51:01
根据自己想要的代理的效果, 选择其一
```bash
# 访问 /proxy1
# 实则访问 http://127.0.0.1:4000/
# 访问 /proxy1/
# 实则访问 http://127.0.0.1:4000//
# 访问 /proxy1/test.html
# 实则访问 http://127.0.0.1:4000/test.html
location /proxy1 {
proxy_pass http://127.0.0.1:4000/;
}
# 访问 /proxy2 或者 /proxy2/
# 实则访问 http://127.0.0.1:4000/
# 访问 /proxy2/test.html
# 实则访问 http://127.0.0.1:4000/test.html
location /proxy2/ {
proxy_pass http://127.0.0.1:4000/;
}
# ============ #
# 访问 /proxy3 或 /proxy3/
# 实则访问 http://127.0.0.1:4000/proxy3
# 访问...
来自分类 前端2023-02-13 14:40:13
@[toc]
# nodejs
===框架===
https://github.com/expressjs/express `快速、无约束、极简的node web框架`
===其他===
https://github.com/cheeriojs/cheerio `为服务器特别定制的，快速、灵活、实施的jQuery核心实现` [[文档]](https://github.com/cheeriojs/cheerio/wiki/Chinese-README)
https://github.com/node-schedule/node-schedule `定时任务`
https://github.com/paulmillr/chokidar `最小和高效的跨平台文件监视库`
https://github.com/shelljs/shelljs `Node.js的可移植Unix Shell命令`
https://github.com/caolan/async `async是一个流程控制工具包` [[文档]](http://caolan.github.io/async/v3/index.htm...
来自分类 Vue2022-08-29 11:23:44
需求: 将某一列值相同且相连的行合并
1, 模板:
```html
<el-table :data="tableData" :span-method="objectSpanMethod">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
<el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
<el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
</el-table>
```
2, 数据
```javascript
{
data() {...
来自分类 Vue2021-05-19 16:18:24
@[toc]
仓库地址: [https://github.com/lincenying/mmf-blog-vite-vue3](https://github.com/lincenying/mmf-blog-vite-vue3)
访问地址: [https://vue3.mmxiaowu.com](https://vue3.mmxiaowu.com)
## 1. vite 打包时, 一些 css 神秘消失
### ~~1. 背景图片离奇消失~~
```css
.icon-menu-articles {
width: 12px;
height: 12px;
background-image: url('../images/@1x/menu-articles.png');
}
```
css 中有这么一段样式, 经过 vite 编译后, 背景图片属性消失了, 经过多次测试后, 将图片放到ps编辑后, 重新保存, 好了, 初步判断是vite(也可能是中间某个插件)将图片转成base64时出了问题, 但是图片在之前的 vue-cli 中是正常的, 能正常转成 bas...
来自分类 Vue2021-04-09 09:22:37
代码如下:
```javascript
// use-lock-fn.js
import { ref } from 'vue'
// fn 需要增加竞态锁的函数
// autoUnlock === true 不管fn返回什么, 都自动解锁
// autoUnlock === false 不管fn返回什么, 都不自动解锁
// autoUnlock === 'auto' (默认值) 当fn返回false时, 不自动解锁, 返回其他值时, 自动解锁
const useLockFn = (fn = () => {}, autoUnlock = 'auto') => {
const lock = ref(false)
return async (...args) => {
if (lock.value) return
lock.value = true
try {
const $return = await fn(...args)
if (autoUnlock === true ...
来自分类 前端2021-03-31 21:15:25
@[toc]
`Windi CSS`是`Tailwind CSS`的下一代编译器。
如果您已经熟悉`Tailwind CSS`，可以考虑用`Windi CSS`替代`Tailwind CSS`，它提供了更快的加载时间，并支持`Tailwind CSS` v2.0及更高版本中的所有功能。
如果您不熟悉`Tailwind CSS`，则可以将`Windi CSS`视为实用程序优先的CSS库。
数值:
```css
p-${float[0,...infinite]} -> padding: ${float/4}rem
p-2.5 -> padding: 0.625rem;
p-3.2 -> padding: 0.8rem;
```
尺寸:
```css
// ${size} must end up with rem|em|px|vh|vw|ch|ex
p-${size} -> padding: ${size}
p-3px -> padding: 3px;
p-4rem -> padding: 4rem;
```
分数:
```css
w-${fraction} -> wi...
来自分类 Vue2020-12-18 11:01:53
@[toc]
# 需求: 仿微信聊天
需求很简单, 就是仿微信聊天, 下拉加载历史聊天记录时, 能保持浏览位置, 在网上找了一些例子都不太完美, 要么不能保持浏览位置, 要么会来回跳一下, 反正就是效果不好, 决定还是自己研究研究
# 处理方法
## template 模板部分
使用 uniapp 自带的`scroll-view`来做滚动容器, 需要配合以下属性:
1. `scroll-y`: 允许纵向滚动
2. `scroll-top`: 设置竖向滚动条位置
3. `upper-threshold`: 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
4. `@scrolltoupper`: 滚动到顶部/左边，会触发 scrolltoupper 事件
5. `scroll-anchoring`: 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效
```html
<scroll-view
class="msg-list"
scroll-y="true"
:scroll-top="...
来自分类 Vue2020-11-23 14:17:36
@[toc]
### 需求
页面中接口, 需要带上用户信息或者是某个鉴权字段, 这个用户信息或者鉴权字段由某个接口返回
### 原生 Vue 中的处理方法
#### 1.vuex 配置
```javascript
import api from '@/api'
const state = {
userInfo: null, // 需要的用户数据
globalLoading: true // 一个全局loading, 根据这个字段觉得是否显示一个全局的loading小狗
}
const actions = {
// 读取用户信息
async ['getUserInfo'](store) {
const { commit } = store
const { data, code } = await api('/api/user/user_info')
if (code === 200) {
commit('receiveUserInfo', data)
}
...
来自分类 Vue2020-11-23 14:13:27
@[toc]
# 1. 首先你得有台服务器
# 2. 推荐安装 linux 系统
本文以 CentOS 7.2 为例
# 3. 更换 yum 为国内镜像
1. 备份你的原镜像文件，以免出错后可以恢复。
```bash
# mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
```
2. 下载新的CentOS-Base.repo 到/etc/yum.repos.d/
```bash
// CentOS 5
# wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-5.repo
// CentOS 6
# wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-6.repo
// CentOS 7
# wget -O /etc/yum.repos.d/CentOS-B...
