来自分类 Vue2023-03-29 15:20:35
### 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' //...
来自分类 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 ...
来自分类 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...
来自分类 Vue2019-11-13 10:42:25
假设在根组件用 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 = []...
来自分类 Vue2019-07-08 15:44:55
随着手机浏览器的不断更新, 现在开发移动端, 适配解决方案当属`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...
来自分类 Vue2018-09-28 17:04:49
#### 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
#...