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

前端项目搭建和基础配置

news 来源：原创 2025/6/9 1:38:07

这个模块主要是介绍从零开始搭建项目的一些操作，包含一些前端常用的配置，这里只是一部分，会在后续的文章中逐步进行补充和完善

一、创建项目

在项目路径下使用以下命令生成前后端项目

npm create vite

输入项目名称，框架选择Vue，然后选择TypeScript

生成的项目执行以下命令进行运行

# 安装依赖
npm install
# 运行
npm run dev

然后打开浏览器访问生成的地址，能打开如下页面即可

二、常用配置

1、设置打开启动服务后自动打卡浏览器

找到项目的package.json文件，修改启动脚本，增加–open参数，如下图，重启后即可自动打开浏览器页面

2、配置src项目目录别名

可以在引用组件过程中可以使用@进行引用，简化操作，

首先安装对应的依赖组件

npm install @types/node

然后在vite.config.ts配置文件中新增如下内容：


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, './src')},dedupe: ['vue']}
})

在tsconfig.json文件中增加如下内容：

{"files": [],"references": [// { "path": "./tsconfig.app.json" },// { "path": "./tsconfig.node.json" }],"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["./src/*"]}},"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.vue"]
}

vite-env.d.ts文件中增加如下内容：

// 配置这个文件是 解决错误：找不到模块“@/views/Login.vue”或其相应的类型声明。ts(2307)
// 这段代码告诉 TypeScript，所有以 .vue 结尾的文件都是 Vue 组件，可以通过 import 语句进行导入。这样做通常可以解决无法识别模块的问题。
declare module "*.vue" {import { Component } from "vue";const component: Component;export default component;}

如下图所示，如果references中的内容报错，重启vscode即可

然后将APP.vue文件中引用的HelloWorld.vue改造成从@符号中读取，重启任务依然可以访问

3、添加路由组件

安装路由组件

npm install vue-router@4

在项目src目录下新建router文件夹，并创建index.ts文件，并添加如下内容

import { createRouter, createWebHashHistory } from 'vue-router'
// createRouter方法用于创建路由实例，可以管理多个路由
export default createRouter({history: createWebHashHistory(),routes: [// 路由页面内容]
})

在main.ts中注册路由组件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入路由组件
import router from '@/router'let app = createApp(App)
app.use(router)
app.mount('#app')

测试路由功能，在src下新建两个文件夹，分别是home和about，并分别创建两个index.vue文件，内容随便写，区分开即可

home下的index.vue

<template><div>这是Home页面</div>
</template><script setup lang="ts"></script><style scoped></style>

about下的index.vue

<template><div>这是about页面</div>
</template><script setup lang="ts"></script><style scoped></style>

在路由配置中添加路由

import { createRouter, createWebHashHistory } from 'vue-router'  
// createRouter方法用于创建路由实例，可以管理多个路由
export default createRouter({history: createWebHashHistory(),routes: [// 路由页面{path: '/home',component: () => import('@/home/index.vue')},{path: '/about',component: () => import('@/about/index.vue')},{// 默认主页跳转路由path: "/",redirect: '/home'}]
})

修改App.vue文件删除其他组件并添加路由组件

<template><div><router-view /></div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

访问主页即可跳转到home页面

4、封装pinia

首先安装pinia

npm install pinia

在src下新建store文件夹，并新建index.ts，代码内容如下：


import { createPinia } from "pinia"; 
export default createPinia();

由于我们的store要分模块存储数据，因此在store文件夹下新建modules文件夹，新建一个user.ts文件来存放用户相关的数据，如下图所示

代码如下：

import { defineStore } from "pinia"; const useUserStore = defineStore('user', {state: () => {return { }},actions: { },getters: {},
})export default useUserStore;

5、封装操作操作token工具类util

安装js-cookie模块

npm install --save js-cookienpm install --save @types/js-cookie

在utils下新建auth.ts文件内容如下:

import  Cookies  from 'js-cookie'const TokenKey = 'Admin-Token'export const getToken = () => {return Cookies.get(TokenKey)
}export const setToken = (token) => {return Cookies.set(TokenKey, token)
}export const removeToken = (token) => {return Cookies.remove(TokenKey)
}

如果上面的代码第一行Cookies报红，就在tsconfig.json 中设置 compilerOptions.esModuleInterop 为 true即可

{"files": [],"references": [// { "path": "./tsconfig.app.json" },// { "path": "./tsconfig.node.json" }],// 作用：让@具有提示效果"compilerOptions": {"esModuleInterop": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]}},"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.vue"]
}

前端项目搭建和基础配置

这个模块主要是介绍从零开始搭建项目的一些操作，包含一些前端常用的配置，这里只是一部分，会在后续的文章中逐步进行补充和完善一、创建项目在项目路径下使用以下命令生成前后端项目 npm create vite输入项目名称，框架选择Vue…...

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

计算机网络（49）网络安全问题概述

前言计算机网络安全问题是一个复杂且多维的领域，它涉及到网络系统的硬件、软件以及数据的安全保护，确保这些元素不因偶然的或恶意的原因而遭到破坏、更改或泄露。一、计算机网络安全的定义计算机网络安全是指利用网络管理控制和技术措施，保…...

编程日记 2025/6/2 19:03:15

【Qt】02－信号与槽函数

发生的原因与事件前言一、什么是信号与槽（Signals and Slots）？1.1 信号（Signals）1.2 槽（Slots）1.3 连接方式二、调用基本的信号与槽函数2.1 代码分析connect()的用法 2.2 结果展示三、自定义…...

编程日记 2025/6/3 7:04:18

CVPR 2024 机器学习方向总汇（多任务、联邦学习、迁移学习和对抗等）

1、Machine Learning(机器学习)多任务、联邦学习、迁移学习和对抗等 Molecular Data Programming: Towards Molecule Pseudo-labeling with Systematic Weak Supervision 👍摘要Improving Physics-Augmented Continuum Neural Radiance Field-Based Geometry-Agnos…...

编程日记 2025/6/3 5:29:58

spring中bean的循环依赖细节描述

首先，循环依赖不是一件好事，设计上几乎不会这么设计。但是总有时候要碰到一起奇怪的循环依赖。 spring bean循环依赖之所以能实现，也是有条件的，构造函数的依赖显然不行。而bean生命周期的实例化和属性设置是分阶段的&#xff0c…...

编程日记 2025/6/4 11:28:12

LeetCode - #187 Swift 实现重复的DNA序列

网罗开发 （小红书、快手、视频号同名） 大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等…...

编程日记 2025/6/2 18:28:12

【gin】gin中使用protbuf消息传输go案例

在 Gin 中使用 Protobuf 进行高效消息传输 Protobuf（Protocol Buffers）是一种高效的二进制序列化协议，广泛用于高性能场景的数据传输。相比 JSON，Protobuf 具有更小的体积和更快的解析速度，非常适合服务间通信或前后端…...

编程日记 2025/6/2 8:49:39

Vue.js 动态设置表格最大高度的实现

概述在现代 Web 开发中，响应式设计至关重要，尤其是在处理复杂的布局和数据表格时。表格通常会受到多种因素的影响，如分页、合计行或动态内容，这可能导致表格高度的变化。本文将介绍一个基于 Vue.js 的方法 setMaxHeight&#xf…...

编程日记 2025/6/3 7:03:31

Springboot 注解缓存使用教程

Spring Boot Cache 注解使用教程 Spring Boot 提供了强大的缓存抽象，开发者可以通过注解快速实现缓存功能，从而提高系统性能。本教程将全面介绍 Spring Boot 提供的缓存相关注解及其作用，并结合示例讲解实际应用。 1. 常用缓存注解概览 Spring Boot 缓存提供以下核心注解…...

编程日记 2025/6/3 7:04:02

TCP协议与TCP SYN Flood攻击

✍作者：柒烨带你飞 💪格言：生活的情况越艰难，我越感到自己更坚强；我这个人走得很慢，但我从不后退。 📜系列专栏：网络安全从菜鸟到飞鸟的逆袭目录一， TCP握手二&#xf…...

编程日记 2025/6/4 8:27:27

Cloud Foundry，K8S，Mesos Marathon弹性扩缩容特性对比

一、Cloud Foundry 使用Scaling an Application Using App Autoscaler插件，基于资源使用情况触发简单扩缩容 CPU、内存、Http带宽、延时等监控这些资源的使用情况决定扩缩容策略：实例是增加还是减少 Instance Limits 限制实例数量范围，定义…...

编程日记 2025/6/4 8:29:36

python轻量级框架-flask

简述 Flask 是 Python 生态圈中一个基于 Python 的Web 框架。其轻量、模块化和易于扩展的特点导致其被广泛使用，适合快速开发 Web 应用以及构建小型到中型项目。它提供了开发 Web 应用最基础的工具和组件。之所以称为微框架，是因为它与一些大型 Web 框架…...

编程日记 2025/6/4 7:22:06

Git实用指南：忽略文件、命令别名、版本控制、撤销修改与标签管理

目录 1.忽略特殊文件 1.1.那如何配置我们需要忽略的文件的呢？ 1.2.如何检验效果？ 2.给命令配置别名 3.基本操作之版本回退 3.1.使用场景： 3.2.使用方法： 4.撤销修改情况一：对于工作区的代码，还没…...

编程日记 2025/6/4 8:29:16

神经网络常见面试题

梯度消失和梯度爆炸 1. 梯度消失（Vanishing Gradient） 定义： 梯度消失是指在反向传播过程中，梯度逐渐变得非常小，导致前面几层的权重更新非常缓慢，甚至几乎不更新，从而影响网络的学习过程。特…...

编程日记 2025/6/4 8:27:44

数据结构漫游记：动态实现栈(stack)

嘿，各位技术潮人！好久不见甚是想念。生活就像一场奇妙冒险，而编程就是那把超酷的万能钥匙。此刻，阳光洒在键盘上，灵感在指尖跳跃，让我们抛开一切束缚，给平淡日子加点料，注入满满的pa…...

编程日记 2025/6/1 15:29:32

PyTorch使用教程- Tensor包

### PyTorch使用教程- Tensor包 PyTorch是一个流行的深度学习框架，它提供了一个易于使用的API来创建和操作张量（Tensors）。张量是一个多维数组，类似于NumPy中的ndarray，但它是基于GPU的，支持自动求导。本文…...

编程日记 2025/6/4 8:28:55

在 Vue 3 项目中集成和使用 vue3-video-play

前言随着视频内容的普及，视频播放功能在现代 Web 应用中变得越来越重要。如果你正在开发一个 Vue 3 项目，并且需要快速集成视频播放功能，vue3-video-play 是一个轻量级且易于使用的 Vue 3 组件。本文将介绍如何在 Vue 3 项目中使用 vue3-vi…...

编程日记 2025/6/4 8:28:04

02_登录窗口

新建场景重命名为GameRoot 双击GameRoot进入新场景同样摄像机清除格式删除平行光并关闭渲染灯光的天空盒新建空节点重命名为GameRoot GameRoot为游戏的根节点在整个游戏中都不会被删除在游戏的根节点下创建UI的根节点Canvas 创建一个空节点作为UI根节点下的登录场景UI…...

编程日记 2025/6/4 8:28:20

基于 JFinal 的国产微服务框架

Jboot 是一个基于 JFinal、Dubbo、Seata、Sentinel、ShardingSphere、Nacos 等开发的国产框架。其特点是： 1、基于 JFinal 完整的 MVC ORM 支持。2、支持多数据源、分库分表和分布式事务。3、支持 Dubbo RPC 的完整功能，有超过 1亿用户产品正在使用…...

编程日记 2025/6/2 8:04:12

ASP.NET Core - 配置系统之配置提供程序

ASP.NET Core - 配置系统之配置提供程序 3. 配置提供程序3.1 文件配置提供程序3.1.1 JSON配置提供程序3.1.2 XML配置提供程序3.1.3 INI配置提供程序 3.2 环境变量配置提供程序3.3 命令行配置提供程序3.4 内存配置提供程序3.5 配置加载顺序 3.6 默认配置来源 3. 配置提供程序前…...

编程日记 2025/6/1 16:31:30

Axios 封装：处理重复调用与内容覆盖问题

问题描述&背景下拉选择框，支持搜索，搜索时携带参数调用接口并更新下拉选项下拉选择连续进行多次搜索，先请求但响应时间长的返回值会覆盖后请求但响应时间短的举例： 搜索后先清空选项，再输入内容进行搜索。清空后…...

编程日记 2025/6/3 8:51:43

MySQL程序之：使用DNS SRV记录连接到服务器

在域名系统（DNS）中，SRV记录（服务位置记录）是一种资源记录，它使客户端能够指定指示服务、协议和领域的名称。DNS查找该名称会返回一个回复，其中包含该领域中提供所需服务的多个可用服务器的名称。…...

编程日记 2025/6/2 3:28:27

Swift Parameter-free Attention Network模型详解及代码复现

研究动机在深度学习领域，超分辨率技术的发展面临着模型复杂度与推理速度之间的权衡。传统的基于注意力的超分辨率网络虽然能提高性能，但往往需要较大的感受野和参数化的注意力图，这可能导致推理速度下降。为了解决这一问题，研究人员提出了Swift Parameter-free Atten…...

编程日记 2025/6/1 15:00:19

React进阶之react.js、jsx模板语法及babel编译

React React介绍React官网初识React学习MVCMVVM JSX外部的元素props和内部的状态statepropsstate 生命周期constructorgetDerivedStateFromPropsrendercomponentDidMount()shouldComponentUpdategetSnapshotBeforeUpdate(prevProps, prevState) 创建项目CRA：create-…...

编程日记 2025/6/2 23:38:53

渗透测试之XEE[外部实体注入]漏洞原理攻击手法 xml语言结构防御手法

目录原理 XML语言解释什么是xml语言： 以PHP举例xml外部实体注入 XML语言结构面试题目如何寻找xxe漏洞 XEE漏洞修复域防御提高版本代码修复 php java python 手动黑名单过滤(不推荐) 一篇文章带你深入理解漏洞之 XXE 漏洞 - 先知社区原理 XXE&…...

编程日记 2025/5/31 0:22:11

macOS安装Gradle环境

文章目录说明安装JDK安装Gradle 说明 gradle8.5最高支持jdk21，如果使用jdk22建议使用gradle8.8以上版本安装JDK mac系统安装最新（截止2024.9.13）Oracle JDK操作记录安装Gradle 下载Gradle，解压将其存放到资源java/env目录…...

编程日记 2025/5/30 18:00:38

openwrt下oaf插件编译安装，实现上网行为监控

文章目录入门级APP青少年模式设备屏幕使用时间电脑浏览器使用时间限制Surpal 介绍安装使用进阶级专业级旁路由方案openwrt路由器固件编译OAF(Open App Filter）安装编译带有oaf的固件固件烧写设备上电启动应用特征库设置黑白名单及应用访问限制骨灰级ref守护孩子视力，用科技“…...

编程日记 2025/6/3 0:42:47

Top期刊算法！RIME-CNN-BiLSTM-Attention系列四模型多变量时序预测

Top期刊算法！RIME-CNN-BiLSTM-Attention系列四模型多变量时序预测目录 Top期刊算法！RIME-CNN-BiLSTM-Attention系列四模型多变量时序预测预测效果基本介绍程序设计参考资料预测效果基本介绍基于RIME-CNN-BiLSTM-Attention、CNN-BiLSTM-Attention、R…...

编程日记 2025/6/4 1:14:27

GPT-4o背后的语音技术

GPT-4o背后的语音技术 GPT-4o是一个any2any的多模态模型，能够接受文本、音频、图像、视频等多模态输入，也能够生成包含文本、语音、图像和视频等混合内容的多模态输出。本文主要谈语音多模态的实现，并分享一些对于语音研究未来发展的看法。 GPT-4o (“o” 代表 “omni”) …...

编程日记 2025/6/3 16:18:34

数据库存储上下标符号，sqlserver 2008r2，dm8

sqlserver 2008r2： 数据类型需要用nvarchar插入数据时字符串前需要用N create table test( col1 varchar(50), col2 nvarchar(50) ) insert into test(col1,col2) values(U⁴⁵⁶⁷⁸⁹⁰D₁₂₃₄₅₆₇₈₉₀,U⁴⁵⁶⁷⁸⁹⁰D₁₂₃₄₅₆₇₈₉₀) insert into…...

编程日记 2025/6/4 1:15:31

【25】Word：林涵-科普文章❗

目录题目 NO1.2.3 NO4.5.6 NO7.8 NO9.10 NO11.12 不连续选择：按住ctrl按键，不连续选择连续选择：按住shift按键，选择第一个，选择最后一个。中间部分全部被选择题目 NO1.2.3 布局→纸张方向：横向…...

编程日记 2025/6/4 1:14:11

全面解析计算机网络：从局域网基础到以太网交换机！！！

一、局域网的基本概念和体系结构特点: 覆盖较小的地理范围较低的时延和误码率局域网内的各节点之间以“帧"为单位进行传输支持单播、广播、多播单播(一对一发送帧)：如 A->B广播(一对全部发送帧)：如 A->BCDEFG多播(一对部分发送帧)&#xff…...

编程日记 2025/6/4 1:14:59

《 C++ 点滴漫谈：二十二》操作符炼金术：用C++ operator重塑代码美学

摘要 C 的 operator 关键字和操作符重载是语言的核心特性之一，使开发者能够扩展内置操作符以适应自定义类型，从而实现更高效、直观的代码表达。本文全面解析了 operator 关键字的基本概念、支持重载的操作符范围及其使用场景，详细介绍了操作…...

编程日记 2025/6/4 1:15:15

Ubuntu 22.04 TLS 忘记root密码，重启修改的解决办法

1.想办法进入这个界面，我这里是BIOS引导的是按Esc按一下就行，UEFI的貌似是按Shift不得而知，没操作过。下移到Advanced options for Ubuntu，按enter 2.根据使用的内核版本，选择带「recovery mode」字样的内核版本&#…...

编程日记 2025/6/4 1:13:38

【LeetCode: 215. 数组中的第K个最大元素 + 快速选择排序】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持，因为它具有很高的价值，算法就是这样✨ 🌲 作者简介：硕风和炜，…...

编程日记 2025/6/4 1:14:43

GraphRAG： Auto Prompt Tuning 实践

GraphRAG 的 Auto Prompt Tuning 功能是一个强大的工具，用于优化知识图谱的生成过程。以下是对该功能的详细介绍和分析： 自动提示调优（Auto Prompt Tuning） 1. 概念 GraphRAG 的自动提示调优功能旨在为特定领域的知识图谱生成创…...

编程日记 2025/6/4 1:13:22

提示词的艺术----AI Prompt撰写指南（个人用）

提示词的艺术写在前面制定提示词就像是和朋友聊天一样，要求我们能够清楚地表达问题。通过这个过程，一方面要不断练习提高自己地表达能力，另一方面还要锻炼自己使用更准确精炼的语言提出问题的能力。什么样的提示词有用？ 有…...

编程日记 2025/6/4 1:13:54

Tensor 基本操作1 | PyTorch 深度学习实战

目录创建 Tensor常用操作unsqueezesqueezeSoftmax代码1代码2代码3 argmaxitem 创建 Tensor 使用 Torch 接口创建 Tensor import torch参考：https://pytorch.org/tutorials/beginner/basics/tensorqs_tutorial.html 常用操作 unsqueeze 将多维数组解套&#xf…...

编程日记 2025/6/3 7:49:45

CSS 的基础知识及应用

前言 CSS（层叠样式表）是网页设计和开发中不可或缺的一部分。它用于描述网页的视觉表现，使页面不仅实现功能，还能提供吸引人的用户体验。本文将介绍 CSS 的基本概念、语法、选择器及其在提升网页美观性方面的重要性。什么是 CSS&…...

编程日记 2025/6/4 16:47:45

贪心算法（题1）区间选点

输出 2 #include <iostream> #include<algorithm>using namespace std;const int N 100010 ;int n; struct Range {int l,r;bool operator <(const Range &W)const{return r<W.r;} }range[N];int main() {scanf("%d",&n);for(int i0;i&l…...

编程日记 2025/6/2 13:23:05

CamemBERT：一款出色的法语语言模型

摘要预训练语言模型在自然语言处理中已无处不在。尽管这些模型取得了成功，但大多数可用模型要么是在英语数据上训练的，要么是在多种语言数据拼接的基础上训练的。这使得这些模型在除英语以外的所有语言中的实际应用非常有限。本文探讨了为其他语言训练…...

编程日记 2025/6/3 12:34:07

解决 IntelliJ IDEA 项目包后出现“% classes”和“% lines covered”的问题

前言在使用 IntelliJ IDEA 开发 Java 或其他支持的语言时，您可能会遇到项目包后面意外地出现了“% classes”和“% lines covered”的信息。这些百分比表示的是代码覆盖率（Coverage），它们展示了您的测试覆盖了多少比例的类和代码…...

编程日记 2025/6/3 12:34:39

Matlab总提示内存不够用，明明小于电脑内存

目录前言情况1（改matlab最大内存限制）情况2（重启电脑）情况3 前言在使用matlab中，有时候需要占用的内存并没有超过电脑内存依旧会报错，提示内存不够用，可以尝试下面几种方法，总有一…...

编程日记 2025/6/4 16:47:59

Py之cv2：cv2(OpenCV，opencv-python)库的简介、安装、使用方法(常见函数、图像基本运算等)

1. OpenCV简介 1.1 OpenCV定义与功能 OpenCV（Open Source Computer Vision Library）是一个开源的计算机视觉和机器学习软件库。它为计算机视觉应用程序提供了一个通用的基础设施，并加速了在商业产品中使用机器感知。作为BSD许可的产品&…...

编程日记 2025/6/2 15:35:47

leetcode707-设计链表

leetcode 707 思路本题也是用了虚拟头节点来进行解答，这样的好处是，不管是头节点还是中间的节点都可以当成是中间节点来处理，用同一套方法就可以进行处理，而不用考虑太多的边界条件。下面题目中最主要的实现就是添加操作addA…...

编程日记 2025/6/3 12:34:23

Linux操作命令之云计算基础命令

一、图形化界面/文本模式 ctrlaltF2-6 图形切换到文本 ctrlalt 鼠标跳出虚拟机 ctrlaltF1 文本切换到图形 shift ctrl "" 扩大 ctrl "-" 缩小 shift ctrl "n" 新终端 shift ctrl "t" 新标签 alt 1,…...

编程日记 2025/6/2 18:30:52

HTML＜bdo＞标签

例子指定文本方向： <bdo dir"rtl"> This text will go right-to-left. </bdo> <!DOCTYPE html> <html> <body> <h1>The bdo element</h1> <p>This paragraph will go left-to-right.</p> …...

编程日记 2025/6/3 12:33:51

将IDLE里面python环境pyqt5配置的vscode

首先安装pyqt5全套：pip install pyqt5-tools 打开Vscode： 安装第三方扩展：PYQT Integration 成功配置designer.exe的路径【个人安装pyqt5的执行路径】，便可直接打开UI文件，进行编辑。配置pyuic,如果下图填写方法使用…...

编程日记 2025/6/4 6:52:26

【C++】结构体（下）

4、结构体指针作用：通过指针访问结构体中的成员利用操作符“----->”可以通过结构体指针访问结构体成员。示例： #include<iostream> #include<string> using namespace std; struct student {//姓名string name;//年龄int age;//分数…...

编程日记 2025/6/4 0:18:55

YOLOv10-1.1部分代码阅读笔记-dataset.py

dataset.py ultralytics\data\dataset.py 目录 dataset.py 1.所需的库和模块 2.class YOLODataset(BaseDataset): 3.class ClassificationDataset(torchvision.datasets.ImageFolder): 4.def load_dataset_cache_file(path): 5.def save_dataset_cache_file(prefix,…...

编程日记 2025/6/4 6:53:30