随笔分类 - vue
摘要：【问】 开发一个vue3项目，如何配置兼顾以下需求： 1、dev环境下后端数据用mock配置，随时可调试 2、随时可以build，但build后后端数据采用本地静态数据。 【答】 针对你的需求，这里提供一个完整的 Vue3 项目配置方案。这个方案使用不同的环境变量来控制数据源，实现开发环境用 moc
阅读全文
摘要：有个Vue项目，上传服务器后出现了首屏加载后短暂跳转到404的情况，因为并非在根目录下放置index.html和assets文件夹，而是放在了/a/目录下。 解决方法分为3步。 第一步：修改vite.config.js base: '/a/', //新增这一行吗，即基础目录 server: { po
阅读全文
摘要：两者都是跳转链接，a是原生的，router-link是vue-router的标签。区别： route-link自带hash功能，只要路由配置内打开了hash
阅读全文
摘要：今天遇到一个问题，组件已经设计为响应式，但是在移动端字体太小，多次调试无果，最终发现原因就在于我在main.js入口文件中引用了如下函数 /** * 设置根元素的字体大小，以实现页面的自适应布局。 * @param {number} bs - 基准字体大小，默认值为 16 * @param {num
阅读全文
摘要：在 Vue 3 中，组件的模板支持多个根节点（这被称为 Fragments）。虽然这提高了灵活性，但却与 <Transition> 组件的要求冲突了。<Transition> 组件的工作原理是通过在动画的不同阶段（进入/离开）为单个根元素添加或移除 CSS 类（如 v-enter-from, v-e
阅读全文
摘要：update:xxx 是Vue 3中实现自定义v-model的约定。它的工作原理是： 子组件通过emit('update:propName', newValue)通知父组件需要更新某个属性父组件可以通过v-model:propName="data"或@update:propName="data =
阅读全文
摘要：从vue3开始，不再允许用keep-alive直接包裹router-view，只允许包裹component组件。 所以，要使用缓存，以前可以这么写： <keep-alive> <router-view></router-view> </keep-alive> 从Vue3开始，这种写法不行了，但是可以
阅读全文
摘要：import {createRouter,createWebHashHistory} from 'vue-router' import Header from '@/components/Header.vue' import Footer from '@/components/Footer.vue'
阅读全文
摘要：1、插槽中的两个概念 v-slot: 和 v-slot= （1）v-slot： v-slot: 是组件指令，命名插槽时用的，常用法如下： <BaseLayout> <template v-slot:header> <!-- header 插槽的内容放这里 --> </template> </Base
阅读全文
摘要：可以直接使用 <van-watermark> 标签来实现让水印只显示在一个特定 div 里，下面为你详细介绍实现方式。 思路分析 <van-watermark> 组件本身有一个 wrap 属性，它允许你指定水印要覆盖的元素。所以，我们可以先给目标 div 设置一个引用（ref），然后在 <van-w
阅读全文
摘要：在 Vue 3 项目中，使用 Vite 打包时，可以通过 PostCSS 插件 将 px 自动转换为 rem。以下是实现步骤： 1. 安装所需依赖 你需要安装 postcss-pxtorem 插件来实现 px 到 rem 的转换。 npm install postcss-pxtorem -D 2.
阅读全文
摘要：封装一个包含上传和下载文件功能的 axios 实例，可以提高代码的复用性和可维护性。以下是一个完整的封装示例，支持文件上传、下载、以及常规的 GET/POST 请求。 封装代码 import axios from 'axios'; // 创建 axios 实例 const http = axios.
阅读全文
摘要：使用 Vue 3 制作一个适合手机屏幕的网站（移动端网站）是一个非常常见的需求。以下是一个完整的指南，帮助你从零开始构建一个移动端优化的 Vue 3 项目。 1. 创建 Vue 3 项目 使用 Vite 创建项目 Vite 是一个现代化的前端构建工具，非常适合 Vue 3 项目。 npm creat
阅读全文
摘要：1. npm init vue@latest vue3-project 调用create-app创建， 指定了目录是vue3-projece，但是，紧接着有一堆配置要询问。 2. npm create vite@latest vue3-project -- --template vue一步到位，用了
阅读全文
摘要：<template> <div> <!-- 用户页的面包屑导航 --> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <router-link to="/" class="text
阅读全文
摘要：在Vue 3中创建和使用FormData对象的具体步骤如下： 创建FormData对象：在Vue组件中，首先需要创建一个新的FormData对象。FormData是一个内置的JavaScript对象，用于构建可以通过XMLHttpRequest或fetch提交的表单数据。可以通过以下方式创建：
阅读全文
摘要：在Vue 3项目中，环境变量是管理不同环境下配置的强大工具。以下是一些关于如何在Vue 3项目中有效地定义、访问和使用环境变量的技巧，以及如何在不同环境下管理这些变量的最佳实践。 一、定义环境变量 在Vue 3项目中，你可以使用.env文件来定义环境变量。这些文件通常放在项目根目录下，文件名格式为.
阅读全文
摘要：学习vue 怎么感觉每一个可以用对象做参数的地方，都可以用函数来实现？是这样吗？ 用函数灵活性好
阅读全文
摘要：index.js // 插件定义第一种方式，对象：拥有 install() 方法的对象 const myPlugin = { install(app, options) { // 配置全局方法 app.config.globalProperties.globalMethod = function (
阅读全文
摘要：玩前端，换不到一颗米，纯粹是基于兴趣（我也希望能换到米，但真到那一天，说不定兴趣就没了，^_^），感觉玩这个能带来快乐，仅此而已。 最近，又来了点兴趣，读了读《vue实战》，自然免不了再次接触npm，webpack等这些东西。 于是，按图索骥，见到什么不懂的就按照套路，继续百度，感觉以前模糊的一些概
阅读全文
浙公网安备 33010602011771号