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

devtools/2025/2/27 13:47:09/

文章目录

      • 安装软件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>


http://www.ppmy.cn/devtools/163076.html

相关文章

Ubuntu22上安装MySQL8启动成功，远程无法连接

Ubuntu22上安装MySQL8启动成功，远程无法连接

解决步骤: 1.首先验证网络是否通 ping Linux服务器ip 2.如果网络通&#xff0c;验证是否开放了访问 2.1在服务器上使用 sudo mysql -u root -p 并输入密码连接到mysql 2.2执行 SELECT User, Host FROM mysql.user; 查找一个Host列为’%的用户&#xff0c;这表示允许从任何主机连…
阅读更多...
使用 frp 实现内网穿透：从零到一的完整指南

使用 frp 实现内网穿透：从零到一的完整指南

使用 frp 实现内网穿透&#xff1a;从零到一的完整指南 &#x1f381; DeepSeek满血版免费领啦&#xff01;字节跳动火山引擎官方&#xff0c;免费抵扣3625万tokens&#xff0c;畅享R1与V3模型&#xff01;参与入口&#xff1a;点击进入 为什么需要内网穿透&#xff1f; 在日常…
阅读更多...
大连指令数据集的创建--数据收集与预处理_02

大连指令数据集的创建--数据收集与预处理_02

1.去哪儿爬虫 编程语言&#xff1a;Python爬虫框架&#xff1a;Selenium&#xff08;用于浏览器自动化&#xff09;解析库&#xff1a;BeautifulSoup&#xff08;用于解析HTML&#xff09; 2.爬虫策略 目标网站&#xff1a;去哪儿&#xff08;https://travel.qunar.com/trav…
阅读更多...
大模型基础概念之神经网络宽度

大模型基础概念之神经网络宽度

在大模型中，神经网络宽度是提升模型容量的核心手段之一，与深度、数据规模共同构成性能的三大支柱。合理增加宽度可显著增强模型表达能力，但需结合正则化、硬件优化和结构设计进行平衡。未来趋势可能包括动态宽度调整、稀疏化宽度设计（如MoE）以及更高效宽度-深度复合缩放策…
阅读更多...
【p-camera-h5】 一款开箱即用的H5相机插件，支持拍照、录像、动态水印与样式高度定制化。

【p-camera-h5】 一款开箱即用的H5相机插件，支持拍照、录像、动态水印与样式高度定制化。

【开源推荐】p-camera-h5&#xff1a;一款轻量级H5相机插件开发实践 一、插件背景 在Web开发中&#xff0c;原生摄像头功能的集成往往面临以下痛点&#xff1a; 浏览器兼容性问题视频流与水印叠加实现复杂移动端适配困难功能定制成本高 为此&#xff0c;p-camera-h5 —— 一…
阅读更多...
巨控科技的GRM550元出魔抗实现PLC远程下载与维护方案：工业自动化的高效解决方案

巨控科技的GRM550元出魔抗实现PLC远程下载与维护方案：工业自动化的高效解决方案

巨控科技PLC远程下载与维护方案&#xff1a;工业自动化的高效解决方案 在工业自动化领域&#xff0c;设备的高效维护与快速调试是保障生产连续性的关键。巨控科技推出的PLC远程下载与维护方案&#xff0c;凭借其先进的技术和广泛兼容性&#xff0c;成为企业实现设备远程管理的…
阅读更多...
如何进行OceanBase 运维工具的部署和表性能优化

如何进行OceanBase 运维工具的部署和表性能优化

本文来自OceanBase 用户的实践分享 随着OceanBase数据库应用的日益深入&#xff0c;数据量不断攀升&#xff0c;单个表中存储数百万乃至数千万条数据的情况变得愈发普遍。因此&#xff0c;部署专门的运维工具、实施针对性的表性能优化策略&#xff0c;以及加强指标监测工作&…
阅读更多...
【Java项目】基于Spring Boot的简历系统

【Java项目】基于Spring Boot的简历系统

【Java项目】基于Spring Boot的简历系统 技术简介&#xff1a;采用Spring Boot框架、Java技术、MySQL数据库等实现。 系统简介&#xff1a;系统主要实现了管理员模块、用户模块二大部分。管理员登录进入简历系统可以查看首页、个人中心、用户管理、简历模板管理、模板类型管理、…
阅读更多...
最新文章

Copyright @ 2022~2023