目录
（0）Windows环境下使用命令行从零到一手动搭建Vue3工程教程。
[（2）无需再下载依赖包，直接执行npm run dev。](#（2）无需再下载依赖包，直接执行npm run dev。)
二、使用IDEA(2024)打开、启动与简化(初始的)Vue3工程。
（4）项目"瘦身"。(删除src下独自开发时无用代码或文件)
<1>删除assets、components目录下无用文件。
<3>删除router(路由)目录中的多余、无效路由并简单修改。
<5>删除main.js中的引入已删除css文件代码。(删除无用导包)
<6>瘦身完成------Vue3工程的最基础脚手架搭建完成！
（2）assets目录下新建global.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文件如下。
javascript<template> <div> 欢迎来到hyl的第一个Vue3项目主页！加油学习吧！ </div> </template> <script setup> </script>
<3>删除router(路由)目录中的多余、无效路由并简单修改。
- 使用：component: () => import('../views/Home.vue')。
- 代替：import HomeView from '../views/Home.vue' + component: HomeView。
- 精简后的路由如下所示。
javascriptimport { 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样式。
javascript<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 教程 | 菜鸟教程
