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

news2025/5/11 3:12:36

文章目录

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