随笔分类 - Vue
自学Vue。
将自己学到的所理解的整理。
方便后续查看复习。
摘要：1.参考66文章先初始化项目 2.使用代码空间进行打开 3.项目目标添加.github/workflows/deploy.yml 这样一个文件 1 name: Deploy 2 3 on: 4 push: 5 branches: 6 - main 7 8 jobs: 9 deploy: 10 run
阅读全文
摘要：1.添加忽略上传文件 在GitHub上创建仓库，对于名称有特殊要求，为用户名.github.io。例如我的用户名为mengxiaoxuan888，仓库名称则为mengxiaoxuan888.github.io。 创建仓库后，将我们刚刚创建的博客工程上传到GitHub仓库中。注意并不是所有文件都需要上
阅读全文
摘要：1.电脑本地需要安装node 16+版本 2.电脑本地安装pnpm 3.本地创建一个文件夹，用于存放该项目，如：F:\资料整合\编程资料\编程项目\网页\sfisadmin\vitepress 4.进入该文件夹 5.初始化node工程： pnpm init 6.安装vitepress pnpm ad
阅读全文
摘要：HTML,JAVASCRIPT,CSS实现点击菜单栏，瞄点到相应位置 2023/9/6 09:05:14 要通过HTML、JavaScript和CSS实现点击菜单栏后瞄点到相应位置，可以按照以下步骤进行操作： HTML结构： 在HTML中，定义一个菜单栏和对应的内容区域，例如： htmlCopy C
阅读全文
摘要：for循环遍历方式： 1 <template> 2 <div class="container"> 3 <img 4 v-for="(image, index) in images" 5 :key="index" 6 class="image" 7 :class="{ zoomed: image.h
阅读全文
摘要：鼠标放在图片上自动放大，移开图片还原成原来大小 1 <template> 2 <div class="container"> 3 <img 4 class="image" 5 :class="{ zoomed: hovered }" 6 src="./path/to/your/image.jpg"
阅读全文
摘要：1.初始化vue Vite项目 可以去官方网站查看如何创建：http://www.vitejs.net/ 2.打包： 先正常运行自己创建的项目，看是否能正常运行：pnpm run dev 如果正常运行，可以停止运行，执行打包指令：pnpm run build 打包好后会生成一个dist文件夹。里面就
阅读全文
摘要：1 <template> 2 <div> 3 <el-card style="height:80px;font-size: 30px;">OBA RM LABEL 列印指令生成</el-card> 4 <el-card> 5 <el-form :inline="true" style="align-
阅读全文
摘要：1 <template> 2 <div> 3 <el-card style="height:80px;font-size: 30px;">二维码生成器</el-card> 4 <div style="display: flex;"> 5 <el-card style="width: 250px;ba
阅读全文
摘要：1 <template> 2 <div> 3 <el-table 4 :data="mergedTableData" 5 border 6 stripe 7 > 8 <!-- 表头 --> 9 <el-table-column 10 prop="date" 11 label="Date" 12 ><
阅读全文
摘要：const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'Tom', address: 'No.
阅读全文
摘要：vue3+vite+typescript+element-plus+setup语法糖实现el-table中的数据导出excel 2023/7/19 下午4:52:14 要在Vue 3中使用Vite、TypeScript和Element Plus来实现将数据导出为Excel，你可以按照以下步骤进行操作
阅读全文
摘要：作为一个资深程序员，我会采取以下步骤来教你： 1. 确保你已经安装好了必要的开发环境，包括Node.js和Vue CLI。如果你还没有安装，我会指导你如何安装这些工具。 2. 介绍VUE3、VITE、TYPESCRIPT和element-plus的基本概念和特性。我会向你解释它们的作用和用途，并提供
阅读全文
摘要：要实现导出Excel功能，你可以使用以下步骤： 1. 安装相关依赖： ```bash npm install xlsx file-saver ``` 2. 在你的组件中引入相关依赖： ```javascript import { ref } from 'vue'; import { saveAs }
阅读全文
摘要：vue中点击按钮，打开新页面 不是在当前页面重新渲染哦，而是再开一个页面 在Vue中，你可以使用router-link组件或者编程式导航来在点击按钮时打开一个新页面。 使用Router-Link组件： 在Vue Router中，你可以使用<router-link>组件来创建一个链接，点击链接时会导航
阅读全文
摘要：又遇到如下报错了，该如何处理， Access to XMLHttpRequest at 'http://localhost:3000/users' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Acc
阅读全文
摘要：<template> <div> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> </template> <script setup lang="ts"> import { ref, on
阅读全文
摘要：当在网页中输入地址后发现无法打开VUE项目地址： 报错Invalid Host header 解决方法： 在webpack 5 中disableHostCheck应该被遗弃了查看文档了解到需将 disableHostCheck:true替换为historyApiFallback: true,allo
阅读全文
摘要：使用的是vue2 解决方法： 在vue.config,js中加入proxy配置： devServer: { proxy:{ '/api':{ target:'http://localhost:3000',//填写后台接口地址 changeOrigin:true,//设置允许跨域 pathRewrit
阅读全文
摘要：通过vue传输JSON格式菜单栏数据，对element导航栏进行遍历，组件代码如下： <template> <div> <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> <el-radio-button :label
阅读全文
