### 1. 安装 vite-plugin-html 插件, 并引入 ```javascript import { createHtmlPlugin } from 'vite-plugin-html' //... export default ({ mode }) => { //... plugins: [ createHtmlPlugin({ inject: { data: { } } }), //.... ], //... } //... ``` ### 2. 定义所需要的数据 ```javascript import path from 'node:path' // ... const vmDesignWidth = 3840 // 设计稿宽度 const vmDesignHeight = 1080 // 设计稿宽度 const minWindow = '1920Px' //...

需求: 将某一列值相同且相连的行合并 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() {...

@[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...

代码如下: ```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 ...

@[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="...

@[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) } ...

@[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...

假设在根组件用 dispatch 触发一个异步的 Action ```javascript async created() { await this.$store.dispatch(`base/info/get`) }, ``` 在路由组件里 watch 数据 ```javascript computed: { ...mapGetters({ $info: 'base/info/get' }) }, watch: { $info(val) { console.log(val) } } ``` 刷新页面, 这时候会出现有时候能触发 watch, 有时候又不触发, 这到底是什么原因呢? 看 vue 的源代码: https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L48-L62 ```javascript export function initState (vm: Component) { vm._watchers = []...

随着手机浏览器的不断更新, 现在开发移动端, 适配解决方案当属`rem + vw` Vant 文档中虽然有 REM 适配的方法, 试用 postcss-pxtorem 和 lib-flexible, 但是由于 Vant 设计稿应该是用 375 分辨率的, 如果我们的设计稿是 640 或者 750的, 换算起来则有些麻烦 ``` module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } } ``` 这里如果直接修改了`rootValue`来适配我们自己的设计稿, 可能会导致 Vant 的 rem 数值偏小 先看`rem + vw`的 less 配置: ```less // 设计稿宽度 @vm_design: 750; // 为什么设置 100? 设置成便于计算, 计算r...

#### 1. 不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 `/page/1` => `/page/2` 或者 `/page?id=1` => `/page?id=2` 这类链接跳转时, 将不在执行`created, mounted`之类的钩子, 这时候你需要在路由组件中, 添加`beforeRouteUpdate`钩子来执行相关方法拉去数据 相关钩子加载顺序为: beforeRouteUpdate #### 2. 设置 router-view 的 key 属性值为 $route.path 从`/page/1` => `/page/2`, 由于这两个路由的`$route.path`并不一样, 所以组件被强制不复用, 相关钩子加载顺序为: beforeRouteUpdate => created => mounted 从`/page?id=1` => `/page?id=2`, 由于这两个路由的`$route.path`一样, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为: beforeRouteUpdate #...