来自分类 Vue2024-01-19 22:36:30
有时候做一个简单的活动页, 使用构建工具显得太大材小用, 或者这个页面需要嵌入后端代码, 这时候我们就可以直接在html文件或者后端模板里写vue代码
直接写在html文件里:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Demo</title>
</head>
<body>
<div id="app">
<div>Your name: {{ data.name }}</div>
<div>Your pass: {{ data.pass }}</div>
...
来自分类 Vue2024-01-19 22:36:14
### 1. 在浏览器开发工具中打开控制台
Windows 或 Linux ：Ctrl+Shift+J
苹果机：Cmd+Option+J
### 2. 访问Vue应用程序实例
在控制台输入:
```ts
const app = Array.from(document.querySelectorAll('*')).find((e) => e.__vue_app__).__vue_app__
```
app变量将会得一个Vue实例的引用
我们现在可以将应用程序版本存储在一个名为的新变量中version：
```ts
const version = app.version
```
### 3. 访问 Vue Devtools 实例
我们需要访问 Vue Devtools 实例，可通过以下方式访问`window.__VUE_DEVTOOLS_GLOBAL_HOOK__`, 将其存储在一个名为`devtools`的变量中...
来自分类 Vue2024-01-19 22:36:03
如果您需要某个代码块仅在客户端运行，可以使用以下变量`process.client`：
```html
＜script setup＞
if (process.client) {
// 此代码仅在客户端运行
}
＜/script＞
```
如果您需要某个代码块仅在服务端运行，可以使用以下变量`process.server`：
```html
＜script setup＞
if (process. server) {
// 此代码仅在服务端运行
}
＜/script＞
```
例如，如果您需要访问`window/document`对象，只能在客户端进行, 那么上面的判断方法将很有用。...
来自分类 Vue2024-01-19 22:35:57
### 代码如下
```ts
export function useAutoScroll(key: string) {
// 记录滚动条位置, 这里直接使用Nuxt3自带的useState方法, 使用本地存储, Pinia, Vuex之类都可以
const scrollTop = useState<number>(key)
// 离开页面时, 记录滚动条的位置
onBeforeRouteLeave((to, from, next) => {
scrollTop.value = Math.max(window.scrollY, document.documentElement.scrollTop, document.body.scrollTop)
next()
})
// 页面挂载成功后, 恢复滚动条位置
onMounted(() => {
console.log('onMounted', scrollTop.value)
if (scrollTop.value)...
来自分类 Vue2024-01-19 22:35:38
### 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' //...
来自分类 Vue2024-01-19 22:35:02
需求: 将某一列值相同且相连的行合并
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() {...
来自分类 Vue2024-01-19 22:34:40
代码如下:
```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 ...
来自分类 Vue2024-01-19 22:34:32
@[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...
来自分类 Vue2024-01-19 22:33:51
@[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="...
来自分类 Vue2024-01-19 22:33:37
@[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)
}
...
