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

农妇山泉一亩田 · 13 小时前

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云