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

【2025全网最新最全】前端Vue3框架的搭建及工程目录详解

article 2026/4/4 23:28:55

文章目录

      • 安装软件Node.js
      • 搭建Vue工程
      • 创建Vue工程
        • 精简Vue项目文件
      • Vue工程目录的解读
      • 网页标题的设置
      • 设置全局样式
      • 路由配置

安装软件Node.js

下载地址：https://nodejs.org/zh-cn/

安装完成后，打开cmd,查看环境是否准备好

node -v
npm -v

npm使用之前一定要配置淘宝镜像源

npm config set https://registry.npmmirror.com

查看镜像

npm config get registry

镜像可能会变，如果改变通过网上查找最新

搭建Vue工程

vue.js官网：https://cn.vuejs.org

vue.js快速上手页面：https://cn.vuejs.org/guide/quick-start.html

前提条件：

使用命令行查看node.js版本

node -v

新建一个文件夹，在文件夹上方搜索栏输入cmd打开当前目录下的cmd窗口

这种打开方式是非管理员方式，如果执行命令时报错，那就是权限问题，就要使用管理员身份运行。

管理员身份运行cmd:

搜索cmd,点击以管理员身份运行

这时候管理员身份打开的是C盘文件夹，我们需要通过cd xxx的方式转到项目所在文件夹。

①先输入D:，转到D盘盘符

然后复制项目所在文件夹的路径，在cmd窗口输入cd,然后再空格，最后粘贴路径，再回车

在这个目录下，我们就可以使用命令创建Vue工程及后续操作了。

创建Vue工程

使用命令创建Vue工程：

npm create vue@latest

然后根据提示运行提供的三行命令

cd vue-project,npm install(也可以简写成npm i),npm run dev

正常启动后，根据系统提供的Local地址，去浏览器打开相应的页面

在命令行页面按两次Ctrl+C关闭正在运行的Vue工程

精简Vue项目文件

在IDEA打开相应的文件夹，删掉一些文件及文件夹，精简项目文件

在IDEA中打开package.json(依赖文件），点击"dev":"vite"旁边的按钮，执行启动，相当于命令行中的npm run dev

编码配置，改为UTF-8,改完一定要Save或Apply

在Inspections—>输入Vue,将原先打勾全部取消勾选，这样就没有红色波浪线的提示。

删除相关文件，将选中的文件删掉（按住Ctrl,然后点击相关文件）

由于删除了某些文件，因此很多文件的代码也要更改

①HomeView.vue

这是原先样式：

由于TheWelcome.vue删除了，这里面import要删除，同时template中的main也要删除

最后，HomeView.vue改名为Home.vue

<template>
<div>主页
</div>
</template><script setup></script>

②App.vue

然后来到App.vue，这里面的原先页面是这样，也需要进行删除和精简

删除无用代码后的页面：

<template><RouterView />
</template>

③router目录下的index.js

修改后的文件：

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: import('../views/Home.vue'),},],
})export default router

④main.js

之前main.css删除了，这里也需要删除import

修改后的代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(router)app.mount('#app')

现在修改完成后，重新启动，如果出现这样的页面，有出现访问路径，说明修改得没问题

在浏览器打开就是这样一个页面，后续可以根据自己的需求再添加代码，让页面更丰富。

Vue工程目录的解读

Vue工程下面有很多文件夹和文件，下面说明一下他们的作用

node_modules:不是源码文件，是依赖包下载后的存放目录。

public:存放全局静态文件，比如说网页的icon

很多网页有这种小图标（icon文件），这个就要放public后才会显示

src:

  • assets:存放代码引用的静态文件,比如：css,js,img
    • css：存放全局或组件相关的样式文件
    • js：存放全局或组件相关的JavaScript文件
    • img：存放图片资源（建议进一步细分，如img/icons、img/backgrounds等）
    • fonts：存放字体文件（如.ttf、.woff等）
    • 其他资源：如svg、json等静态文件
  • components:放vue的组件(可复用的代码块，就叫组件），是代码复用的核心目录。
    • 每个组件应包含.vue文件（或单独的.js、.css文件）
    • 组件可以分为公共组件（如按钮、表单、导航栏）和业务组件（如用户的个性化组件）
  • router:定义路由的目录，用于管理应用的导航和页面跳转
    • index.js：路由的核心配置文件，定义路由路径（如/login、/about）以及对应的组件
    • 支持按需加载路由（lazy-load）或拆分路由文件（如auth.js、pages.js等）
  • views:存放vue网页文件的目录
    • 每个视图组件对应一个完整的页面（如LoginPage.vue、AboutPage.vue）
    • 视图组件通过路由进行导航
  • App.vue:vue页面全局的入口，所有vue网页进入时都需要先经过它。所有vue文件的父级。
    • 通常包含全局的组件（如导航栏、侧边栏、底部栏）
    • 提供路由出口（<router-view>）以渲染子页面
    • 可以包含全局的状态管理（如 Vuex 的状态）
  • main.js:代码的配置文件,引入第三方的组件或者我们自己定义的组件，js,css等。
    • 引入Vue和相关插件（如Vue Router、Vuex）
    • 引入组件库（如Element UI、Ant Design Vue等）
    • 注册全局组件或指令
    • 创建并导出Vue实例

index.html:vue编译成网页才能在浏览器渲染,是 Vue 应用的起点，浏览器加载这个文件后，Vue 才能开始工作。

jsconfig.json:内部配置文件

package.json:定义依赖库的文件

package-lock.json:下载依赖的时候锁定版本的一个文件(固定版本，防止用户启动后又修改）

vite.config.js:全局的配置文件（Vue3是基于vite的工具来配置的，配置端口之类的，比如我可以配置端口8080，这样启动时就使用8080端口，而不是分配的5173端口）

网页标题的设置

在index.html中修改title标签即可改变网页标题

<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--      网页标题--><title>springboot-vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

设置全局样式

在src/assets文件夹下面新建文件夹css,css文件夹中新建一个global.css

在global.css添加代码(用于消除边距）

*{box-sizing: border-box;}
body{margin: 0;padding: 0;color: #333;font-size: 14px;
}
a{text-decoration: none;
}

然后在main.js中引入global.css

import './assets/css/global.css'

路由配置

配置404页面，很多时候网页并没有那个路由，用户访问的时候就要跳出404页面提示用户网页不存在

首先在assets目录新建目录imgs,然后将图片放到该目录下

在views文件夹下新建一个404.vue,然后写相应的代码

<template>
<div style="height: 100vh;display: flex;align-items: center;justify-content: center;"><div style="width: 50%"><img style="width: 100%" src="@/assets/imgs/404.png" alt=""><div style="text-align: center;font-size: 20px;color: #0e1986;padding: 20px 0;"><a href="/">返回主页</a></div></div>
</div>
</template>
<script setup lang="ts">
</script>


<template>
<div style="height: 100vh;display: flex;align-items: center;justify-content: center;"><div style="width: 35.5%"><img style="width: 100%" src="@/assets/imgs/404.jpg" alt=""><div style="text-align: center;font-size: 20px;color: #0e1986;padding: 20px 0;"><a href="/">返回主页</a></div></div>
</div>
</template>
<script setup lang="ts">
</script>

相关文章：

【2025全网最新最全】前端Vue3框架的搭建及工程目录详解

文章目录 安装软件Node.js搭建Vue工程创建Vue工程精简Vue项目文件 Vue工程目录的解读网页标题的设置设置全局样式路由配置 安装软件Node.js 下载地址&#xff1a;https://nodejs.org/zh-cn/ 安装完成后&#xff0c;打开cmd,查看环境是否准备好 node -v npm -vnpm使用之前一定…...

编程日记 2026/3/25 20:48:53

大白话JavaScript闭包在实际项目中有哪些应用场景？

大白话JavaScript闭包在实际项目中有哪些应用场景&#xff1f; 闭包是指有权访问另一个函数作用域中的变量的函数。在实际项目中&#xff0c;闭包有很多应用场景&#xff0c;以下是一些常见的例子&#xff1a; 数据封装和隐私保护 场景&#xff1a;在开发中&#xff0c;有时…...

编程日记 2026/3/31 3:55:14

R 语言科研绘图第 27 期 --- 密度图-分组

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程日记 2026/4/4 9:04:13

QT各种版本下载安装

参考链接&#xff1a; 【Qt】超详细&#xff01;Qt4.8.6和VS2010的配置及使用 由于QT官网一般现在进不去&#xff0c;所以下载一些QT版本只能通过镜像或者以前下载存储的安装包来进行&#xff0c;现在推荐两种方法 从参考链接中搬过来&#xff1a; 方案一&#xff1a;国内镜…...

编程日记 2026/3/26 18:25:51

信息系统的安全防护

文章目录 引言**1. 物理安全****2. 网络安全****3. 数据安全****4. 身份认证与访问控制****5. 应用安全****6. 日志与监控****7. 人员与管理制度****8. 其他安全措施****9. 安全防护框架**引言 从技术、管理和人员三个方面综合考虑，构建多层次、多维度的安全防护体系。 信息…...

编程日记 2026/4/4 9:03:59

TCPDF 任意文件读取漏洞：隐藏在 PDF 生成背后的危险

在网络安全的世界里&#xff0c;漏洞就像隐藏在黑暗中的“定时炸弹”&#xff0c;稍有不慎就会引发灾难性的后果。今天&#xff0c;我们要聊的是一个与 PDF 生成相关的漏洞——TCPDF 任意文件读取漏洞。这个漏洞可能让攻击者轻松读取服务器上的敏感文件&#xff0c;甚至获取整个…...

编程日记 2025/8/4 13:30:05

如何解决svn st中出现！（冲突）的问题

在 SVN&#xff08;Subversion&#xff09;中&#xff0c;svn status 命令用于查看工作副本的状态。当你看到 ! 符号时&#xff0c;通常表示文件或目录在工作副本中丢失&#xff08;missing&#xff09;。以下是解决这个问题的步骤&#xff1a; 1. 理解 ! 的含义 ! 表示该文件…...

编程日记 2026/3/26 21:34:39

Redis｜复制 REPLICA

文章目录 是什么能干嘛怎么玩案例演示复制原理和工作流程复制的缺点 是什么 官网地址&#xff1a;https://redis.io/docs/management/replication/Redis 复制机制用于将数据从一个主节点&#xff08;Master&#xff09;复制到一个或多个从节点&#xff08;Slave&#xff09;&a…...

编程日记 2026/3/29 12:00:15

水利 2月26日练习

测量前准备 使用数字万用表的蜂鸣器档&#xff0c;可以高速检验电解电容器的质量好坏。测量方法如图5-14所示。将数字万用表拨至蜂鸣器档&#xff0c;用两支表笔区分与被测电容器Cx的两个引脚接触&#xff0c;应能听到一阵急促的蜂鸣声&#xff0c;随即声响中止&#xff0c;同时…...

编程日记 2026/4/4 4:18:11

Windows逆向工程入门之LOOP与REP指令的深度解析

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 1. LOOP 指令 概念 操作过程 用途 示例代码 扩展知识点&#xff1a;循环优化 2. REP 指令 概念 操作过程 用途 示例代码 扩展知识点&#xff1a;条件前缀 3. LOCK 指令 概念…...

编程日记 2026/3/31 0:23:21

[Web 安全] PHP 反序列化漏洞 —— PHP 序列化 反序列化

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] 反序列化漏洞 - 学习笔记-CSDN博客 0x01&#xff1a;PHP 序列化 — Serialize 序列化就是将对象的状态信息转化为可以存储或传输的形式的过程&#xff0c;在 PHP 中&#xff0c;通常使用 serialize() 函数来完成序列化的操作…...

编程日记 2026/3/29 14:18:10

汽车免拆诊断案例 | 保时捷车发动机偶发熄火故障 2 例

案例1　2008款保时捷卡宴车行驶中发动机偶发熄火 故障现象　 一辆2008款保时捷卡宴车&#xff0c;搭载4.8 L 自然吸气发动机&#xff0c;累计行驶里程约为21万km。车主反映&#xff0c;该车行驶中发动机偶发熄火&#xff1b;重新起动&#xff0c;发动机能够起动着机&#xff…...

编程日记 2026/4/4 5:51:00

Python游戏编程之赛车游戏6-2

3.2 move()方法的定义 Player类的move()方法用于玩家控制汽车左右移动&#xff0c;当玩家点击键盘上的左右按键时&#xff0c;汽车会相应地进行左右移动。 move()方法的代码如图7所示。 图7 move()方法的代码 其中&#xff0c;第20行代码通过pygame.key.get_pressed()函数获…...

编程日记 2026/3/26 1:43:26

数据安全_笔记系列09_人工智能（AI）与机器学习（ML）在数据安全中的深度应用

数据安全_笔记系列09_人工智能&#xff08;AI&#xff09;与机器学习&#xff08;ML&#xff09;在数据安全中的深度应用 人工智能与机器学习技术通过自动化、智能化的数据分析&#xff0c;显著提升了数据分类、威胁检测的精度与效率&#xff0c;尤其在处理非结构化数据、复杂…...

编程日记 2026/2/13 13:06:36

渗透测试【order by盲注实践】

实践环境基于sqli-lab靶场的第46关进行 bool盲注 代码如下&#xff1a; import requests from bs4 import BeautifulSoup# 定义获取用户名的函数&#xff0c;使用 BeautifulSoup 解析 HTML 页面&#xff0c;提取用户名信息 def get_username(resp):soup BeautifulSoup(resp,…...

编程日记 2026/3/26 21:07:42

ROS的action通信——实现阶乘运算（三）

在ROS中除了常见的话题(topic&#xff09;通信、服务(server)通信等方式&#xff0c;还有action通信这一方式&#xff0c;由于可以实时反馈任务完成情况&#xff0c;该通信方式被广泛运用于机器人导航等任务中。本文将通过三个小节的分享&#xff0c;实现基于action通信的阶乘运…...

编程日记 2026/4/2 15:22:37

007：Cesium.ScreenSpaceEventHandler 知识详解，示例代码

查看本专栏目录 - 本文是第 007个API内容详解 vue+cesium 示例教程200+目录 文章目录 一、ScreenSpaceEventHandler 的基本概念初始化 ScreenSpaceEventHandler二、注册事件**常见事件类型**三、注销事件四、示例代码：鼠标移动时显示坐标信息五、示例代码：鼠标左键点击拾取地…...

编程日记 2026/4/3 22:01:12

期权帮|股指期货基差和价差有什么区别？

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 股指期货基差和价差有什么区别&#xff1f; 一、股指期货基差 股指期货基差是指股指期货价格与其对应的现货指数价格之间的差额。 股指期货基差计算公式&#xff1a;基差 现…...

编程日记 2026/3/26 21:10:36

WebSocketHandler 是 Spring Framework 中用于处理 WebSocket 通信的接口

WebSocketHandler 是 Spring Framework 中用于处理 WebSocket 通信的接口&#xff0c;其主要作用是定义了如何处理 WebSocket 的各种事件和消息。以下是 WebSocketHandler 的主要作用和功能&#xff1a; ### 1. 处理 WebSocket 生命周期事件 WebSocketHandler 定义了多个方法来…...

编程日记 2025/7/2 13:05:57

内网渗透测试-Vulnerable Docker靶场

靶场来源&#xff1a; Vulnerable Docker: 1 ~ VulnHub 描述&#xff1a;Down By The Docker 有没有想过在容器中玩 docker 错误配置、权限提升等&#xff1f; 下载此 VM&#xff0c;拿出您的渗透测试帽并开始使用 我们有 2 种模式&#xff1a; - HARD&#xff1a;这需要您将 d…...

编程日记 2026/4/4 1:43:01

一键导出数据库表到Excel

工作中&#xff0c;我们经常需要将数据库表导出到Excel&#xff0c;通常我们会用数据库编辑器之类的工具提供的导出功能来导出&#xff0c;但是它们的导出功能通常都比较简单。 这篇文章将介绍一种简单易用并且功能强大的导出方法。 新增导出 打开的卢导表工具&#xff0c;新…...

编程日记 2026/4/4 5:46:29

2025年电气工程与智能系统国际学术会议（IC2EIS 2025）

重要信息 官网&#xff1a;www.ic2eis.org(点击了解参会投稿等) 时间&#xff1a;2025年3月14-16日 地点&#xff1a;中国河南省郑州市 简介 2025年电气工程与智能系统国际学术会议&#xff08;IC2EIS 2025&#xff09;将于2025年3月14-16日在中国郑州举行。会议旨在为电气…...

编程日记 2026/4/4 3:35:16

Activiti 5 + Spring Boot全流程开发指南

目录 一、环境搭建&#xff08;Spring Boot 2.x&#xff09; 1.1 依赖配置 1.2 配置文件 二、流程定义与部署 2.1 创建BPMN文件&#xff08;leave.bpmn&#xff09; 2.2 流程部署服务 三、流程操作核心实现 3.1 启动流程实例 3.2 查询待办任务 四、审批流程处理 4.1 …...

编程日记 2026/4/4 10:35:09

docker安装etcd:docker离线安装etcd、docker在线安装etcd、etcd镜像下载、etcd配置详解、etcd常用命令、安装常见问题总结

官方网站 官方网址&#xff1a;etcd 二进制包下载&#xff1a;Install | etcd GitHub社区项目&#xff1a;etcd-io GitHub GitHub社区项目版本历史&#xff1a;Releases etcd-io/etcd GitHub 一、镜像下载 1、在线下载 在一台能连外网的linux上执行docker镜像拉取命令…...

编程日记 2026/3/29 1:44:36

【云安全】云原生-Docker（六）Docker API 未授权访问

Docker API 未授权访问 是一个非常严重的安全漏洞&#xff0c;可能导致严重的安全风险。 什么是 Docker API &#xff1f; Docker API 是 Docker 容器平台提供的一组 RESTful API&#xff0c;用于与 Docker 守护程序进行通信和管理 Docker 容器。通过 Docker API&#xff0c;…...

编程日记 2026/4/1 13:06:06

【人工智能顶刊合集】CCF-A/B/C类推荐所有期刊目录，中科院1区审稿极速，81天录用！

本期盘点【人工智能】领域CCF-A/B/C类中科院1-2区期刊最新影响因子、分区、审稿周期参考&#xff01; CCF-A类 Artificial Intelligence • 影响因子&#xff1a;5.1 • 期刊分区&#xff1a;JCR1区&#xff0c;中科院2区 • 年发文量&#xff1a;126 • 自引率&#xff1…...

编程日记 2026/3/24 4:57:12

C#实战：基于腾讯云大模型知识引擎原子能力提供的文档解析API快速提取图片信息为MD文档

目录 一、大模型知识引擎 LKE介绍 1.1 如何开通服务？ 1.2 大模型知识引擎组成 二、案例实战 2.1、创建项目 2.2、引入腾讯大模型知识引擎 LKE调用SDK依赖库 2.3、代码编写 2.4、界面设计 三、总结 今天借助腾讯云大模型知识引擎原子能力提供的文档解析API快速提取图片…...

编程日记 2026/3/27 5:22:27

第7章_将应用程序与 Keycloak 集成

将应用程序与 Keycloak 集成 到目前为止&#xff0c;您已经了解了 Keycloak 中的主要概念和配置选项。在本章中&#xff0c;您将学习如何应用它们&#xff0c;以便您可以配置您的应用程序并将它们与 Keycloak 集成。 通过选定的集成场景和编码示例&#xff0c;您将根据应用程…...

编程日记 2026/3/31 8:02:32

kotlin的lateinit声明 的变量可能为null吗？

kotlin的lateinit声明 的变量可能为null吗&#xff1f; DeepSeek R1 思考 26 秒 思考过程 嗯&#xff0c;用户问的是Kotlin中的lateinit变量是否可能为null。首先&#xff0c;我需要回顾一下lateinit的作用和特性。lateinit用于延迟初始化一个非空类型的变量&#xff0c;这样…...

编程日记 2026/3/2 8:50:55

千峰React:案例一

做这个案例捏 因为需要用到样式&#xff0c;所以创建一个样式文件&#xff1a; //29_实战.module.css .active{text-decoration:line-through } 然后创建jsx文件&#xff0c;修改main文件&#xff1a;导入Todos&#xff0c;写入Todos组件 import { StrictMode } from react …...

编程日记 2026/4/2 18:47:03