前端糊涂蛋子

2025年07月29日 margin 与 padding 值的顺序问题

/** margin 和 padding 值的顺序,
 * 按照顺时针 top right bottom left,
 * 从后面开始省略,
 * 省略的 left 为 right 值,
 * 省略的 bottom 为 top 值,
 * 省略的 right 为 top 值
 */

padding: top right bottom left
padding: top right bottom
                          (right)
padding: top right
                    (top) (right)
padding: top
              (top) (top)  (top)

/** margin(外边距)值同理,
 * 与 padding(内边距)值的区别是,
 * margin 值可为负数
 */

margin: top right bottom left
margin: top right bottom
                         (right)
margin: top right
                   (top) (right)
margin: top
             (top) (top)  (top)

2025年06月15日 Vue3 局部样式 scoped / module

<template>
	<div class="fontSize " :class="m.fontColor ">123</div>
	<i class="el-icon-edit"></i>
</template>

<style scoped>
@import 'element-ui/lib/theme-chalk/index.css';

.fontSize { font-size: 24px; }
</style>

<style module="m">
.fontColor { color: pink; }
</style>

2025-06-10 Set 报错

let single = new Set()
[1, 2, 3, 4].map(item => item)

// Uncaught TypeError: Cannot read properties of undefined (reading 'map')
// 语法可能被解释为 let single = new Set()[1, 2, 3, 4].map(item => item)
// 修改方式, 添加分号即可

let single = new Set();
[1, 2, 3, 4].map(item => item)

2024年11月23日 vite proxy 跨域问题

总结: 注意一些小细节
问题: vite > proxy 正确配置跨域, 但实际请求并没有发生
缘由: 早期 yarn build 构建生成了 vite.config.js, 在 yarn dev 时读取了 vite.config.js 文件, 并没有读取修改的 vite.config.ts 文件
解决: 删掉 vite.config.js 即可

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/inkScholar': {
        target: 'http://vue_server.inkscholar.cn',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/inkScholar/, '')
      }
    }
  },
})

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

// vue page script
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
proxy.$axios.get('/inkScholar/site')
// http://vue_server.inkscholar.cn/site