当前位置：首页 > news >正文

vue3学习日记5 - 项目起步

news 来源：原创 2025/6/10 1:56:30

最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录

视频网址：

Day2-11.项目起步-静态资源引入和ErrorLen安装_哔哩哔哩_bilibili

学习日记：

vue3学习日记1 - 环境搭建-CSDN博客

vue3学习日记2 - 组合式API基础学习-CSDN博客

vue3学习日记3 - 组合式API练习小案例-CSDN博客

vue3学习日记4 - Pinia-CSDN博客

一、项目初始化

1、创建一个vue项目

2、安装相关依赖

3、运行项目

4、创建文件夹

二、git管理

1、概述

Git 是一个功能强大的工具，特别适合需要团队协作、版本控制以及高效管理代码历史的场景。由于它的分布式特性和高效的操作，Git 已经成为现代软件开发中最常用的版本控制系统之一。

基于create-vue创建出来的项目默认没有初始化git仓库，需要我们手动初始化

2、执行命令并完成提交

1、git init

初始化一个新的git仓库

2、git add .

将文件修改为待提交的状态，git add 只是将修改暂时记录在暂存区，真正将改动永久保存到 Git 仓库中，还需要执行 git commit 命令。

注意：后面要加" . "

3、git commit -m "init"

提交文件的更改到 Git 仓库，并附上提交信息。

三、别名路径联想设置

1、什么是别名路径联想提示？

在编写代码的工程中，一旦输入@/，VSCode会立刻联想出src下的所有目录和子文件，同一文件路径访问不容易出错

2、配置别名联想设置

1、正常情况下输入“@/”没有任何反应

2、在项目根目录下新增jsconfig.json文件

新增后，可能会自动到vite.config.js下

{"compilerOptions": {"baseUrl": "./","paths": {"@/*":["src/*"]}}
}

3、配置完成

4、总结

在这只是做联想提示，并没有转换路径

实际路径转换是在文件vite.config.js下

四、elementPlus按需导入

官网：

安装 | Element Plus (element-plus.org)

1、安装包管理器

根据官网API可知输入他给的命令进行安装

输入命令运行结果

2、安装配套的插件

安装成功后，可以在以下文件中找到

3、修改配置文件

根据官网提示编写vite.config.ts相关配置

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// elementPlus插件导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

4、重新运行一下项目

5、检测elementPlue是否导入成功

<script setup>
</script><template><el-button type="success">Success</el-button>
</template>

运行结果

五、elementPlus主题色修改

1、安装scss

输入命令

npm install sass

2、准备定制样式文件

在文件夹style下，新建文件夹element，在此文件夹下新建文件index.scss

index.scss内容

// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': (// 主色'base': #27ba9b,),'success': (// 成功色'base': #1dc779,),'warning': (// 警告色'base': #ffb302,),'danger': (// 危险色'base': #e26237,),'error': (// 错误色'base': #cf4444,),),
);

3、通知Element采用scss语言

4、自动导入样式化进行覆盖

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// elementPlus插件导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [// 配置elementPlus采用sass样式配色系统ElementPlusResolver({ importStyle:"sass"})],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},css:{preprocessorOptions:{scss:{// 自动导入定制化样式文件进行样式覆盖additionalData:`@use "@/styles/element/index.scss" as *;`}}}
})

5、测试

重新运行项目，按钮颜色改变，修改成功

六、axios相关配置

1、安装axios

命令行中输入" npm install axios "

2、axios基础封装

在utils文件夹下新建文件http.js

// axios基础封装// 导入axios
import axios from "axios";
// 创建一个axios实例
const httpInstance = axios.create({// 设置接口基地址baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',// 设置超时时间timeout:5000
})// 拦截器// axios请求拦截器
httpInstance.interceptors.request.use(config => {return config
}, e => Promise.reject(e))// axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {return Promise.reject(e)
})// 导出
export default httpInstance

3、API

在api文件夹下testAPI.js

// axios基础封装// 导入axios
import axios from "axios";
// 创建一个axios实例
const httpInstance = axios.create({// 设置接口基地址baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',// 设置超时时间timeout:5000
})// 拦截器// axios请求拦截器
httpInstance.interceptors.request.use(config => {return config
}, e => Promise.reject(e))// axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {return Promise.reject(e)
})// 导出
export default httpInstance

4、测试

在main.js中调用方法

// 测试接口函数
import { getCategory } from '@/apis/testAPI'
getCategory().then( res => {console.log(res)
})

5、运行结果

6、问题小结

如果项目里面不同的业务模块需要的接口地址不同，该如何来做？

axios.create() 方法可以执行多次，每次执行都会生成一个新的实例，比如：
const http1 = axios.create({ baseURL: 'url1' })
const http2 = axios.create({ baseURL: 'url2' })

七、项目整体路由设计

1、一级路由

设计首页和登录页的路由（一级路由）

1、路由设计原则

找内容切换的区域，如果是页面整体切换，则为一级路由

2、删除文件夹views下面所有的文件

3、在views文件夹下建立文件夹Layout和Login，并且分别在底下建立文件index.vue

Layout下index.vue内容
<template><div>我是首页</div>
</template>
Login下index.vue内容
<template><div>我是登录页</div>
</template>

你会发现一直报错，将鼠标放上去报错信息如下

原因是，vue3规定命名必须有两个单词组成，index不符合规范，要解决此问题，只需要让其不强制要求组件命名即可

4、修改router文件夹下index.js

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'/***  createRouter : 创建router实例对象*  createWebHistory ：创建history模式的路由*/
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',component: Layout,},{path: '/login',component:Login},],
})export default router

5、在App.vue使用

<script setup>
</script><template><!-- 引入路由 --><router-view/>
</template>

6、运行结果

2、二级路由

1、路由设计原则

找内容切换的区域，如果是在一级路由页的内部切换，则为二级路由

2、在views文件夹下建立文件夹Home和Categorize，并且分别在底下建立文件index.vue

3、在routes文件夹下的index.js添加二级路由

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Categorize from '@/views/Categorize/index.vue'/***  createRouter : 创建router实例对象*  createWebHistory ：创建history模式的路由*/
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',component: Layout,children:[{// 当默认显示时，直接滞空就好path:'',component:Home},{path:'categorize',component:Categorize}]},{path: '/login',component:Login},],
})export default router

4、在Layout文件夹下index.js中添加二级路由入口

<template><div>我是首页</div><router-view/>
</template>

5、运行结果

3、问题小结

1、路由设计的依据是什么

内容切换的方式

2、默认二级路由如何进行设置

path配置置空

八、静态资源存放

图片资源：把images文件夹放到assets目录下样式资源：把common.scss文件放到styles目录下

可以安装以下插件，编写代码时显示报错信息

九、scss文件的自动导入

在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为var.scss的文件中，正常组件中使用，需要先导入scss文件，再使用内部的变量，比较繁琐，自动导入可以免去手动导入的步骤，直接使用内部的变量

1、在style文件夹下新建文件var.scss

$xtxColor:#27ba9b; 
$helpColor:#e26237; 
$sucColor:#1dc779; 
$warnColor:#ffb302; 
$priceColor:#cf4444

2、修改配置文件

3、测试(App.vue)

<script setup>
</script><template><!-- 引入路由 --><router-view/><div class="sc">哈哈哈哈哈</div>
</template><style lang="scss" scoped>
.sc{color: $warnColor;
}
</style>

4、运行结果

问题小结

1、git初始化提交报错

原因

git没有配置用户名和邮箱地址

解决

设置邮箱和用户名

运行以下命令可查看设置是否正确

git config --global user.name git config --global user.email

运行结果

vue3学习日记5 - 项目起步

最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录视频网址： Day2-11.项目起步-静态资源引入和ErrorLen安装_哔哩哔哩_bilibili 学习日记： vue3学习日记1 - 环境搭建-CSDN博…...

编程日记 2025/5/31 6:50:22

ESP32,uart安装驱动uart_driver_install函数剖析，以及intr_alloc_flags 参数的意义

在 uart_driver_install 函数中，参数 RX_BUF_SIZE * 2 指定了接收缓冲区（RX buffer）的大小。这个参数对于 UART 驱动程序来说非常重要，因为它决定了可以存储多少接收到的数据，直到应用程序读取它们为止。下面是对该函数…...

编程日记 2025/6/1 9:07:27

android源码编译后，为什么emulator一直黑屏或者停止android界面

一、前言最近编译了android12的源码，但是编译完成之后，emulator命令一直卡在android界面上，不会进入系统。经过我多方面的研究，终于找到解决方案。记录下来，希望对遇到这个问题的朋友有所帮助。二、解决方案网上…...

编程日记 2025/6/1 21:00:59

ubuntu22.04降级安装CUDA11.3

环境：主机x64的ubuntu22.04，原有CUDA12.1，但是现在需要CUDA11.3，本篇文章介绍步骤。一、下载CUDA11.3的run文件下载网址：https://developer.nvidia.com/cuda-11-3-1-download-archive?target_osLinux&target_…...

编程日记 2025/6/2 21:06:18

hive知识体系

hive知识体系 hive知识体系链接: 1Hive概览链接: 2Hive表类型链接: 3Hive数据抽样链接: 4Hive计算引擎链接: 5Hive存储与压缩链接: 6Hive Sql 大全链接: 6Hive Sql 大全-Hive 函数链接: 6Hive Sql 大全-窗口函数链接: 7Hive执行计划链接: 8Hive SQL底层执行原理链接…...

编程日记 2025/6/2 18:00:05

【ASP.NET学习】Web Forms创建Web应用

文章目录什么是 Web Forms？ASP.NET Web Forms - HTML 页面用 ASP.NET 编写的 Hello RUNOOB.COM它是如何工作的？经典 ASP ASP.NET Web Forms - 服务器控件经典 ASP 的局限性ASP.NET - 服务器控件ASP.NET - HTML 服务器控件ASP.NET - Web 服务器控件ASP.N…...

编程日记 2025/6/3 10:47:43

【Qt】QThread总结

目录成员函数创建方式方式一方式二方式三注意 example总结参考文章成员函数创建方式方式一 QThread 静态成员create auto thd QThread::create([]{});方式二继承QThread类，重写run run函数它作为线程的入口，也就是线程从run()开始执行&#…...

编程日记 2025/6/4 11:02:26

常见的安全测试漏洞详解

🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快一、SQL注入攻击 SQL 注入攻击主要是由于程序员在开发过程中没有对客户端所传输到服务器端的参数进行严格的安全检查，同时 SQL 语句的执行引用了该参…...

编程日记 2025/6/3 10:49:22

代理模式和适配器模式有什么区别

代理模式（Proxy Pattern）和适配器模式（Adapter Pattern）都是结构型设计模式，它们有不同的应用场景和目标，虽然在某些方面看起来相似，但它们的意图和实现方式有显著的区别。 1. 代理模式&#x…...

编程日记 2025/6/2 18:59:09

一、强化学习及其关键元素二、强化学习的分类三、任务与奖赏 import numpy as np# 迷宫定义 maze np.array([[0, 0, 0, 0, 0],[0, -1, -1, 0, 0],[0, 0, 0, -1, 0],[-1, -1, 0, -1, 0],[0, 0, 0, -1, 1] ])# 定义强化学习的参数 gamma 0.8 # 折扣因子 alpha 0.5 # 学习率…...

编程日记 2025/6/4 10:52:59

【Hive】新增字段(column)后，旧分区无法更新数据问题

TOC 【一】问题描述 Hive修改数据表结构的需求，比如：增加一个新字段。如果使用如下语句新增列，可以成功添加列col1。但如果数据表tb已经有旧的分区（例如：dt20190101），则该旧分区中的col1将为…...

编程日记 2025/6/3 10:48:47

智能化的城市管理解决方案，智慧城管执法系统源码，微服务架构、Java编程语言、Spring Boot框架、Vue.js前端技术

智慧城管执法系统是一种高度信息化、智能化的城市管理解决方案，它利用现代信息技术，如微服务架构、Java编程语言、Spring Boot框架、Vue.js前端技术、Element UI组件库、UniApp跨平台开发工具以及MySQL数据库等，构建了一个综合性的执法管理平…...

编程日记 2025/6/3 10:49:38

【区间DP】【hard】力扣1312. 让字符串成为回文串的最少插入次数

加粗样式给你一个字符串 s ，每一次操作你都可以在字符串的任意位置插入任意字符。请你返回让 s 成为回文串的最少操作次数。「回文串」是正读和反读都相同的字符串。示例 1： 输入：s “zzazz” 输出：0 解释：字…...

编程日记 2025/6/4 10:48:19

android刷机

android ota和img包下载地址： https://developers.google.com/android/images?hlzh-cn android启动过程线刷格式：ota格式模式：recovery 优点：方便、简单，刷机方法通用，不会破坏手机底层数据&#xff0…...

编程日记 2025/6/3 10:49:06

web-前端小实验8

实现以上图片中的内容代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wid…...

编程日记 2025/6/1 18:40:03

C++实现设计模式---单例模式 (Singleton)

单例模式 (Singleton) 概念单例模式确保一个类在整个程序生命周期中只有一个实例，并提供一个全局访问点。它是一种创建型设计模式，广泛用于需要共享资源的场景。使用场景配置管理器：程序中需要一个全局的配置对象。日志系统&#xff…...

编程日记 2025/6/2 20:55:04

【大数据】机器学习-----线性模型

一、线性模型基本形式线性模型旨在通过线性组合输入特征来预测输出。其一般形式为： 其中： x ( x 1 , x 2 , ⋯ , x d ) \mathbf{x}(x_1,x_2,\cdots,x_d) x(x1,x2,⋯,xd) 是输入特征向量，包含 d d d 个特征。 w ( w 1 , w 2 , ⋯ ,…...

编程日记 2025/6/4 4:44:08

C#类型转换

C#是静态类型的语言，变量一旦声明就无法重新声明或者存储其他类型的数据，除非进行类型转换。本章的主要任务就是学习类型转换的知识。类型转换有显式的，也有隐式的。所谓显式，就是我们必须明确地告知编译器，我们要把变…...

编程日记 2025/6/4 15:13:10

OpenCV相机标定与3D重建(55)通用解决 PnP 问题函数solvePnPGeneric()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述根据3D-2D点对应关系找到物体的姿态。 cv::solvePnPGeneric 是 OpenCV 中一个更为通用的函数，用于解决 PnP 问题。它能够返回多个可能…...

编程日记 2025/6/4 0:08:57

NVIDIA CUDA Linux 官方安装指南

本文翻译自：https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#post-installation-actions NVIDIA CUDALinux安装指南 CUDA工具包的Linux安装说明。文章目录 1.导言1.1.系统要求1.2.操作系统支持政策1.3.主机编译器支持政策1.3.1.支持的C方言…...

编程日记 2025/6/4 9:18:24

C++中的STL

STL（标准模板库）在广义上分为：容器，算法，迭代器容器和算法之间通过迭代器进行无缝衔接 STL大体上分为六大组件:分别为容器，算法，迭代器，仿函数，适配器，空间…...

编程日记 2025/6/1 10:27:15

前端进程和线程及介绍

前端开发中经常涉及到进程和线程的概念，特别是在浏览器中。理解这两个概念对于理解浏览器的工作机制和前端性能优化非常重要。以下是详细介绍： 1. 什么是进程和线程？ 进程： 是操作系统分配资源的基本单位。一个程序启动后&#xf…...

编程日记 2025/5/25 9:10:44

本地用docker装mysql

目录拉取镜像查看镜像启动容器查看运行中的容器连接到 MySQL 容器其他一些操作装WorkBench链接mysql——————————————允许远程登录MySql 拉取镜像 docker pull mysql查看镜像 docker image lsREPOSITORY TAG IMAGE ID CREATED SIZE mysq…...

编程日记 2025/6/2 20:55:38

设计模式行为型责任链模式（Chain of Responsibility Pattern）与常见技术框架应用解析

责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它允许将请求沿着处理者链进行发送。每个处理者对象都有机会处理该请求，直到某个处理者决定处理该请求为止。这种模式的主要目的是避免请求的发送者和接收者之间…...

编程日记 2025/6/2 20:55:54

Apache Spark中与数据分区相关的配置和运行参数

Apache Spark中与数据分区相关的配置和运行参数涉及多个方面，包括动态分区设置、分区数设置、Executor与并行度配置等。合理配置这些参数可以显著提高Spark作业的执行效率和资源利用率。在实际应用中，建议根据业务需求和计算集群的特性进行相应的调整和测…...

编程日记 2025/6/2 23:02:10

“深入浅出”系列之设计模式篇：（0）什么是设计模式

设计模式六大原则 1. 单一职责原则：一个类或者一个方法只负责一项职责，尽量做到类的只有一个行为原因引起变化。核心思想：控制类的粒度大小，将对象解耦，提高其内聚性。 2. 开闭原则：对扩展开放&#xf…...

编程日记 2025/5/29 22:38:28

【Git版本控制器--1】Git的基本操作--本地仓库

目录初识git 本地仓库认识工作区、暂存区、版本库 add操作与commit操作 master文件与commit id 修改文件版本回退撤销修改删除文件初识git Git 是一个分布式版本控制系统，主要用于跟踪文件的更改，特别是在软件开发中。为什么要版本…...

编程日记 2025/6/2 10:20:45

如何在Jupyter中快速切换Anaconda里不同的虚拟环境

目录介绍操作步骤 1. 选择环境，安装内核 2. 注册内核 3. 完工。视频教程介绍很多网友在使用Jupyter的时候会遇到各种各样的问题，其中一个比较麻烦的问题就是我在Anaconda有多个Python的环境里面，如何让jupyter快速切换不同的Pyt…...

编程日记 2025/6/1 8:32:41

Python自学 - “包”的创建与使用(从头晕到了然)

<< 返回目录 1 Python自学 - “包”的创建与使用(从头晕到了然) 相对于模块，包是一个更大的概念，按照业界的开发规范，1个代码文件不要超过1000行，稍微有点规模的任务就超过这个代码限制了，必然需要多个文件来管…...

编程日记 2025/6/3 21:52:12

ElasticSearch 同义词匹配

synonym.txt 电脑, 计算机, 主机复印纸, 打印纸, A4纸, 纸, A3 平板电脑, Pad DELETE /es_sku_index_20_20250109 PUT /es_sku_index_20_20250109 {"settings": {"index": {"number_of_shards": "5","number_of_replicas&quo…...

编程日记 2025/6/2 19:01:18

android 官网刷机和线刷

nexus、pixel可使用google官网线上刷机的方法。网址：https://flash.android.com/ 本文使用google线上刷机，将Android14 刷为Android12 以下是失败的线刷经历。准备工作下载升级包。https://developers.google.com/android/images?hlzh-cn 注意&…...

编程日记 2025/6/4 3:44:09

Vue环境变量配置指南：如何在开发、生产和测试中设置环境变量

-## 前言 Vue.js是一个流行的JavaScript框架，它提供了许多工具和功能来帮助开发人员构建高效、可维护的Web应用程序。其中一个重要的工具是环境变量，它可以让你在不同的环境中配置不同的参数和选项。在这篇博客中，我们将介绍如何在Vue应用程…...

编程日记 2025/6/3 16:55:53

蓝桥杯_B组_省赛_2022（用作博主自己学习）

题目链接算法11.九进制转十进制 - 蓝桥云课进制转换 21.顺子日期 - 蓝桥云课时间与日期 31.刷题统计 - 蓝桥云课时间与日期 41.修剪灌木 - 蓝桥云课思维 51.X 进制减法 - 蓝桥云课贪心 61.统计子矩阵 - 蓝桥云课二维前缀和 71.积木画 - 蓝桥云课动态规划 82.扫雷 - 蓝桥…...

编程日记 2025/5/31 2:40:40

【干货】交换网络环路介绍

定义以太网交换网络中为了提高网络可靠性，通常会采用冗余设备和冗余链路，然而现网中由于组网调整、配置修改、升级割接等原因，经常会造成数据或协议报文环形转发，不可避免的形成环路。如图7-1所示，三台设备两两相连就…...

编程日记 2025/6/2 23:02:45

unity——Preject3——面板基类

目录 1.Canvas Group Canvas Group 的功能 Canvas Group 的常见用途如何使用 Canvas Group 2.代码 3.代码分析类分析：BasePanel 功能作用实际应用代码解析：hideCallBack?.Invoke(); 语法知识点作用虚函数（virtual）和抽象类（abstract）的作用与区别 …...

编程日记 2025/6/2 22:15:02

BTC系列 - 启示录

推荐《区块链启示录：中本聪文集》这本书, 原来早在2010年, BTC生态还不完善的时候, 社区中就已经畅想出了未来其它链上的特色方案, 中本聪也都一一做了教父级回应: coinbase币的成熟时间, 交易池, 交易确认机制, 防51%攻击, 防双重消费, 水龙头, 轻量级客户端, 链上…...

编程日记 2025/6/4 11:48:43

C# 25Dpoint

C# 25Dpoint ，做一个备份 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace _25Dpoint {public partial cl…...

编程日记 2025/6/2 22:15:49

Kotlin构造函数

class Person {var name: String? nullvar age: Int? nullfun think() {println("Mr./Ms.$name, who is $age years old, is thinking!")} }fun main () {val p Person()p.name "Jimmy"p.age 20p.think() } 在Kotlin中任意一个非抽象类都无法被继承…...

编程日记 2025/6/2 10:13:17

springMVC---resultful风格

目录一、创建项目 pom.xml 二、配置文件 1.web.xml 2.spring-mvc.xml 三、图解四、controller 一、创建项目 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi…...

编程日记 2025/5/30 23:20:43

flutter 装饰类【BoxDecoration】

装饰类 BoxDecoration BoxDecoration 是 Flutter 中用于控制 Container 等组件外观的装饰类，它提供了丰富的属性来设置背景、边框、圆角、阴影等样式。 BoxDecoration 的主要属性 1.color 背景颜色。类型：Color?示例： color: Colors.blu…...

编程日记 2025/6/4 16:16:09

自动连接校园网wifi脚本实践（自动网页认证）

目录起因执行步骤分析校园网登录逻辑如何判断当前是否处于未登录状态？ 书写代码打包设置开机自动启动起因我们一般通过远程控制的方式访问实验室电脑，但是最近实验室老是断电，但重启后也不会自动连接校园网账户认证，远程工具&…...

编程日记 2025/6/2 10:20:08

微信小程序集成Vant Weapp移动端开发的框架

什么是Vant Weapp Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。官网地睛：介绍 - Vant Weapp (vant-ui.gith…...

编程日记 2025/6/2 13:24:49

MySQL从库 Last_SQL_Errno: 1197 问题处理过程

记录一个遇到过的错误，今天整理一下。问题 MySQL error code MY-001197 (ER_TRANS_CACHE_FULL): Multi-statement transaction required morethan max_binlog_cache_size bytes of storage; increase this mysqld variable and try again报错很明显是max_binlog_…...

编程日记 2025/6/2 22:15:18

springboot 加载本地jar到maven

在Spring Boot项目中，如果你想要加载一个本地的jar文件到Maven本地仓库，你可以使用Maven的install-file目标来实现。以下是一个简单的例子： 打开命令行工具（例如：终端或者命令提示符）。执行以下Maven命令…...

编程日记 2025/6/3 2:10:51

面向B站商业化场景的广告标题智能推荐

01.背景大模型的发展也在不断改变广告主/代理商广告创编的过程，为了提高广告主的创作效率，提升广告主投放标题的质量，我们利用大语言模型技术以及B站商业数据，能够让广告主仅需要输入特定的关键词，即可以生成理论上无…...

编程日记 2025/5/31 19:18:16

element plus 使用 upload 组件达到上传数量限制时隐藏上传按钮

最近在重构项目，使用了 element plus UI框架，有个功能是实现图片上传，且限制只能上传一张图片，结果，发现，可以限制只上传一张图片，但是上传按钮还在，如图： 解决办法&…...

编程日记 2025/6/3 16:49:07

java进行pdf文件压缩

文章目录 pdf文件压缩 pdf文件压缩添加依赖 <dependency><groupId>com.luhuiguo</groupId><artifactId>aspose-pdf</artifactId><version>23.1</version> </dependency>public class OptimizePdf {public static void opti…...

编程日记 2025/6/4 6:34:56

初识算法和数据结构P1：保姆级图文详解

文章目录前言1、算法例子1.1、查字典（二分查找算法）1.2、整理扑克（插入排序算法）1.3、货币找零（贪心算法） 2、算法与数据结构2.1、算法定义2.2、数据结构定义2.3、数据结构与算法的关系2.4、独立于编程语言…...

编程日记 2025/6/1 17:54:39

内网服务器添加共享文件夹功能并设置端口映射

参考网址 https://blog.csdn.net/Think88666/article/details/118438465 1.服务器安装smb服务，由于网路安全不允许使用默认端口（445，446），于是修改端口为62445、62446。 2.每台需要共享的电脑都要修改端口映射&#x…...

编程日记 2025/6/2 6:32:46

ruoyi-cloud docker启动微服务无法连接nacos，Client not connected, current status:STARTING

ruoyi-cloud docker启动微服务无法连接nacos，Client not connected, current status:STARTING 场景当使用sh deploy.sh base来安装mysql、redis、nacos环境后，紧接着使用sh deploy.sh modules安装微服务模块，会发现微服务无法连接nacos的情…...

编程日记 2025/6/3 22:58:58

一、项目初始化

1、创建一个vue项目

2、安装相关依赖

3、运行项目

4、创建文件夹

二、git管理

1、概述

2、执行命令并完成提交

1、git init

2、git add .

3、git commit -m "init"

三、别名路径联想设置

1、什么是别名路径联想提示？

2、配置别名联想设置

1、正常情况下输入“@/”没有任何反应

2、在项目根目录下新增jsconfig.json文件

3、配置完成

4、总结

四、elementPlus按需导入

1、安装包管理器

2、安装配套的插件

3、修改配置文件

4、重新运行一下项目

5、检测elementPlue是否导入成功

五、elementPlus主题色修改

1、安装scss

2、准备定制样式文件

3、通知Element采用scss语言

4、自动导入样式化进行覆盖

5、测试

六、axios相关配置

1、安装axios

2、axios基础封装

3、API

4、测试

5、运行结果

6、问题小结

七、项目整体路由设计

1、一级路由

1、路由设计原则

2、删除文件夹views下面所有的文件

3、在views文件夹下建立文件夹Layout和Login，并且分别在底下建立文件index.vue

4、修改router文件夹下index.js

5、在App.vue使用

6、运行结果

2、二级路由

1、路由设计原则

2、在views文件夹下建立文件夹Home和Categorize，并且分别在底下建立文件index.vue

3、在routes文件夹下的index.js添加二级路由

4、在Layout文件夹下index.js中添加二级路由入口

5、运行结果

3、问题小结

1、路由设计的依据是什么

2、默认二级路由如何进行设置

八、静态资源存放

九、scss文件的自动导入

1、在style文件夹下新建文件var.scss

2、修改配置文件

3、测试(App.vue)

4、运行结果

问题小结

1、git初始化提交报错

原因

解决

运行结果

相关文章：