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

Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)

article 2026/3/19 1:41:34

目录

一、命令行中重新启动已搭建好的Vue3工程。(快速上手)

（0）Windows环境下使用命令行从零到一手动搭建Vue3工程教程。

（1）首先找到已建Vue3工程的目录。

（2）无需再下载依赖包，直接执行npm run dev。

（3）命令行启动Vue3工程的缺点。

二、使用IDEA(2024)打开、启动与简化(初始的)Vue3工程。

（1）打开IDAE，并进入到项目的上级目录。

（2）删除不需要的文件。

（3）启动Vue3工程。

（4）项目"瘦身"。(删除src下独自开发时无用代码或文件)

<1>删除assets、components目录下无用文件。

<2>修改views目录下文件。

<3>删除router(路由)目录中的多余、无效路由并简单修改。

<4>精简Vue项目入口——App.vue。

<5>删除main.js中的引入已删除css文件代码。(删除无用导包)

<6>瘦身完成——Vue3工程的最基础脚手架搭建完成！

三、对Vue3工程基础脚手架进行全局css样式添加。

（1）修改Home.vue文件。

（2）assets目录下新建global.css。(全局样式)

（3）main.js文件引入新的css样式。

一、命令行中重新启动已搭建好的Vue3工程。(快速上手)

（0）Windows环境下使用命令行从零到一手动搭建Vue3工程教程。

Vue实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)-CSDN博客
当Vue3基本环境已配置好后，再次使用命令行启动之前已搭建的Vue3工程的步骤如下。

（1）首先找到已建Vue3工程的目录。

d:。（进入到D盘）
cd D:\Vue\VueCode2025\xmproject\vue0307Night。（进入到项目目录）

（2）无需再下载依赖包，直接执行npm run dev。

这样成功重新启动之前已搭建好的《快速上手-Vue3工程》。

访问给出的local地址。http://localhost:5173/

（3）命令行启动Vue3工程的缺点。

配置、启动方式相对麻烦。（具体可以查看博主上篇博客）
当命令行窗口关闭后，整个项目也跟着关闭运行，也就无法在浏览器中访问到该地址。
所以将使用工具IDEA打开已经搭建好的Vue工程并启动。

二、使用IDEA(2024)打开、启动与简化(初始的)Vue3工程。

（1）打开IDAE，并进入到项目的上级目录。

到IDEA的主界面。点击打开。一定选择的是对应Vue3工程的目录的上级目录打开。

选择正确的目录后，点击确定即可。

点击信任该项目。

（2）删除不需要的文件。

（3）启动Vue3工程。

src目录是所有的代码。
views目录是页面。
components目录里是组件。
assets目录里面是一些文件。

到这一步也是成功独立的完成了IDEA启动Vue3工程了。

（4）项目"瘦身"。(删除src下独自开发时无用代码或文件)

<1>删除assets、components目录下无用文件。

<2>修改views目录下文件。

setup是必备的属性，它是语法糖。有这个就可以使用Vue3的语法特性！

删除AboutView.vue文件。
改名操作：将HomeView.vue名称改成Home.vue。

精简后的Home.vue文件如下。
<template><div>欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div>
</template><script setup></script>
<3>删除router(路由)目录中的多余、无效路由并简单修改。

使用：component: () => import('../views/Home.vue')。
代替：import HomeView from '../views/Home.vue' + component: HomeView。

精简后的路由如下所示。
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
<4>精简Vue项目入口——App.vue。

让App.vue只作为项目的入口文件即可。（超级精简）
只保留<RouterView/>即可。全部从头到尾部删除干净。
如标签<script setup>、<style scoped>标签+内部的所有内容删除干净。

<5>删除main.js中的引入已删除css文件代码。(删除无用导包)

<6>瘦身完成——Vue3工程的最基础脚手架搭建完成！

前往package.json文件：重新启动运行即可。
极简的Vue3初始工程——最基础的脚手架。这样才能基于这个工程完成后面其它的Vue3学习与独立开发。

三、对Vue3工程基础脚手架进行全局css样式添加。

（1）修改Home.vue文件。

添加<div>盒子与基础的css样式。
<template><div><div style="background-color: cadetblue">欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div></div>
</template><script setup></script>
需要去掉<body>本身的一个margin。

（2）assets目录下新建global.css。(全局样式)

body：选择器。表示这段样式应用网页的主体部分（<body>标签）。

margin: 0;设置<body>标签的外边距为0。默认情况下，浏览器会为<body>标签添加一定的外边距。通过设置使网页内容能够紧贴浏览器窗口边缘。

padding: 0;设置<body>标签的内边距为0。同样是为了移除默认的内边距，防止内容与边界之间出现不必要的空间。

font-size: 16px;设置网页中文字的默认字体大小为16像素。这是网页中文字显示的基础大小，其他未单独设置字体大小的元素会继承这个值。

color: #333;设置网页中文字的默认颜色为深灰色。同样，未单独设置颜色的元素会继承这个颜色值。

（3）main.js文件引入新的css样式。

先写import，在打一个双引号，选择@/，后面就可以接css文件的路径。

可以自己设置一些简单的css样式丰富自己的页面。字体大小、字体颜色、字体粗细、背景、字体的形式等待很多。
具体可以去菜鸟教程学习简单的css样式网址——CSS 教程 | 菜鸟教程

到这里就是Vue3工程最基础的脚手架搭建以及全局的css样式已经设置完成！
后面就需要去学习Vue3的基础语法和实战的运用。
具体的Vue3网上学习的菜鸟教程网址——Vue3 教程 | 菜鸟教程

Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)

目录一、命令行中重新启动已搭建好的Vue3工程。(快速上手) （0）Windows环境下使用命令行从零到一手动搭建Vue3工程教程。 （1）首先找到已建Vue3工程的目录。 （2）无需再下载依赖包，直接执行npm ru…...

编程日记 2026/3/13 20:22:35

【ArcGIS】地理坐标系

文章目录一、坐标系理论体系深度解析1.1 地球形态的数学表达演进史1.1.1 地球曲率的认知变化1.1.2 参考椭球体参数对比表 1.2 地理坐标系的三维密码1.2.1 经纬度的本质1.2.2 大地基准面（Datum）的奥秘 1.3 投影坐标系：平面世界的诞生1.3.1 投…...

编程日记 2026/3/17 7:52:39

Redis- 切片集群

切片集群切片集群什么是Redis Cluster吗？为什么需要切片集群？Redis Cluster的数据分片机制是怎样的？哈希槽的算法是什么基本算法流程待填坑切片集群什么是Redis Cluster吗？为什么需要切片集群？ Redis Cluster是R…...

编程日记 2026/2/5 5:12:40

Oxidized收集H3C交换机网络配置报错，not matching configured prompt (?-mix:^(＜CD＞)$)

背景：问题如上标题，H3C所有交换机配置的model都是comware 解决方案： 1、找到compare.rb [rootoxidized model]# pwd /usr/local/lib/ruby/gems/3.1.0/gems/oxidized-0.29.1/lib/oxidized/model [rootoxidized model]# ll comware.rb -rw-r--…...

编程日记 2026/3/17 6:05:03

力扣146 - LRU缓存

视频讲解哈希双向链表为什么要用双向链表？ 快速删除节点（O(1）） 如果是单链表的话，删除一个节点时，需要从头遍历，找到前驱节点，才能修改 prev->next，导致 O(n)…...

编程日记 2026/2/2 15:41:58

单例模式：确保一个类只有一个实例

目录引言 1. 单例模式的核心思想 2. 单例模式的实现方式 2.1 饿汉式单例 2.2 懒汉式单例 2.3 线程安全的懒汉式单例 2.4 双重检查锁定（Double-Checked Locking） 2.5 静态内部类实现单例 2.6 枚举实现单例 3. 单例模式的使用场景 4. 单例模式…...

编程日记 2026/1/27 20:30:15

doris: SQL Server

Doris JDBC Catalog 支持通过标准 JDBC 接口连接 SQL Server 数据库。本文档介绍如何配置 SQL Server 数据库连接。使用须知要连接到 SQL Server 数据库，您需要 SQL Server 2012 或更高版本，或 Azure SQL 数据库。 SQL Server 数据库的 JDBC 驱动…...

编程日记 2026/1/30 4:22:56

【ubuntu20】--- 搭建 gerrit 最新最详细

在编程的艺术世界里，代码和灵感需要寻找到最佳的交融点，才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里，我们将共同追寻这种完美结合，为未来的世界留下属于我们的独特印记。【ubuntu20】--- 搭建 gerrit 最新最详细…...

编程日记 2026/3/9 4:15:24

RtlLookupAtomInAtomTable函数分析之RtlpAtomMapAtomToHandleEntry函数的作用是验证其正确性

第一部分： NTSTATUS RtlLookupAtomInAtomTable( IN PVOID AtomTableHandle, IN PWSTR AtomName, OUT PRTL_ATOM Atom OPTIONAL ) { NTSTATUS Status; PRTL_ATOM_TABLE p (PRTL_ATOM_TABLE)AtomTableHandle; PRTL_ATOM_TABLE_ENTRY a; …...

编程日记 2026/2/1 10:18:25

Python----数据分析（Matplotlib五：pyplot的其他函数，Figure的其他函数， GridSpec）

一、pyplot的其他函数 1.1、xlabel 在matplotlib中， plt.xlabel() 函数用于为当前活动的坐标轴（Axes）设置x轴的标签。当你想要标识x轴代表的数据或单位时，这个函数非常有用。 plt.xlabel(xlabel text) 1.2、ylabel 在matplotl…...

编程日记 2026/3/10 4:38:27

C语言——链表

大神文献：https://blog.csdn.net/weixin_73588765/article/details/128356985 目录一、链表概念 1. 什么是链表？ 1.1 链表的构成 2. 链表和数组的区别数组的特点： 链表的特点： 二者对比： 二…...

编程日记 2026/3/9 16:06:35

使用免费IP数据库离线查询IP归属地

一、准备工作 1.下载免费IP数据库首先，访问 MaxMind官网（https://www.maxmind.com/en/home）如果你还没有MaxMind账号，可以通过此链接地址（https://www.maxmind.com/en/geolite2/signup）进行账号注册&…...

编程日记 2026/3/4 5:34:03

MySQL(单表)知识点

文章目录 1.数据库的概念2.下载并配置MySQL2.1初始化MySQL的数据2.2注册MYSQL服务2.3启动MYSQL服务2.4修改账户默认密码2.5登录MYSQL2.6卸载MYSQL 3.MYSQL数据模型3.1连接数据库 4.SQL简介4.1SQL的通用语法4.2SQL语句的分类4.3DDL语句4.3.1数据库4.3.2表(创建,查询,修改,删除)4…...

编程日记 2026/3/14 23:45:30

1.15-16-17-18迭代器与生成器，函数，数据结构，模块

目录 15，Python3 迭代器与生成器15-1 迭代器15-1-1 基础知识15-1-2 迭代器与for循环工作原理 15-2 生成器（本质就是迭代器）15-2-1 yield 表达式15-2-2 三元表达式15-2-3 列表生成式15-2-4 其他生成器（——没有元祖生成式——&…...

编程日记 2026/3/9 13:43:00

window下的docker内使用gpu

Windows 上使用 Docker GPU需要进行一系列的配置和步骤。这是因为 Docker 在 Windows 上的运行环境与 Linux 有所不同，需要借助 WSL 2（Windows Subsystem for Linux 2）和 NVIDIA Container Toolkit 来实现 GPU 的支持。以下是详细的流程：一、环境准备 1.系统要求 Window…...

编程日记 2026/2/24 3:36:40

CVE-2025-0392：JeeWMS graphReportController.do接口SQL注入漏洞复现

文章目录 CVE-2025-0392：JeeWMS graphReportController.do接口SQL注入漏洞复现0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.构造POC2.复现CVE-2025-0392：JeeWMS graphReportController.do接口SQL注入漏洞复现 0x01 前言免责声明：请勿利用文章内的相…...

编程日记 2026/2/19 8:19:44

DR和BDR的选举规则

在 OSPF（开放最短路径优先）协议中，DR（Designated Router，指定路由器） 和 BDR（Backup Designated Router，备份指定路由器） 的选举是为了在广播型网络（如以太网…...

编程日记 2026/2/28 8:48:25

Java 大视界 -- Java 大数据在智能家居能源管理与节能优化中的应用（120）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2026/3/10 11:55:50

第七课：Python反爬攻防战：Headers/IP代理与验证码

在爬虫开发过程中，反爬虫机制成为了我们必须面对的挑战。本文将深入探讨Python爬虫中常见的反爬机制，并详细解析如何通过随机User-Agent生成、代理IP池搭建以及验证码识别来应对这些反爬策略。文章将包含完整的示例代码，帮助读者更好地理解和…...

编程日记 2026/3/9 16:52:03

MySql的安装及数据库的基本操作命令

1.MySQL的安装 1.1进入MySQL官方网站 1.2点击下载 1.3下拉选择MySQL社区版 1.4选择你需要下载的版本及其安装的系统和下载方式直接安装以及压缩包建议选择8.4.4LST LST表明此版本为长期支持版新手建议选择红框勾选的安装方式 1.5 安装包下载完毕之后点击安装 2.数据库…...

编程日记 2026/3/9 12:53:18

VsCode导入时选择相对路径

自动导入时总是以db://开头了，而我们通常需要的是相对路径，对VsCode进行如下设置： 打开 VSCode 设置： 使用快捷键 Ctrl ,（Windows/Linux）或 Cmd ,（Mac）。或者在菜单栏中选择 …...

编程日记 2026/3/17 4:35:54

计算机视觉｜3D卷积网络VoxelNet：点云检测的革新力量

一、引言在科技快速发展的背景下，3D 目标检测技术在自动驾驶和机器人领域中具有重要作用。在自动驾驶领域，车辆需实时、准确感知周围环境中的目标物体，如行人、车辆、交通标志和障碍物等。只有精确检测这些目标的位置、姿态和类别&#x…...

编程日记 2026/3/10 22:47:17

创新监管，保障生产安全

在现代工业生产中，电气焊作业是不可或缺的一环，但同时也伴随着一定的安全风险。为了提高焊接作业的安全性，迪格特电子科技有限公司开发了电气焊安全作业管理平台，该平台通过智能化监管系统，实现了对焊机联网的全面监管…...

编程日记 2026/2/21 1:26:29

深入解析 C# 中的泛型：概念、用法与最佳实践

C# 中的泛型（Generics） 是一种强大的编程特性，允许开发者在不预先指定具体数据类型的情况下编写代码。通过泛型，C# 能够让我们编写更灵活、可重用、类型安全且性能优良的代码。泛型广泛应用于类、方法、接口、委托、集合等多个方…...

编程日记 2026/2/18 18:19:03

AI数字人源码开发---SaaS化源码部署+PC+小程序一体化

#数字人#数字人分身#123数字人#数字人分身源码部署搭建 AI数字人源码开发步骤确定功能需求：首先确定需要实现的功能和特性，包括语音识别、自然语言处理、人脸识别等功能。这些功能将构成AI数字人的核心功能。开发AI数字人源码：使用合适的…...

编程日记 2026/3/19 0:12:04

Mysql-经典故障案例（1）-主从同步由于主键问题引发的故障

故障报错 Could not execute Write_rows event on table test.users; Duplicate entry 3 for key PRIMARY, Error_code: 1062; handler error HA_ERR_FOUND_DUPP_KEY; the events master log mysql-bin.000031, end_log_pos 329 这是由于从库存在与主库相同主键值&#xff0c…...

编程日记 2026/2/23 0:47:17