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

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

news 2025/9/11 5:47:05

目录

一、命令行中重新启动已搭建好的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 教程 | 菜鸟教程