(Vue3入门教程)一个Vue3项目的基本结构

WAAAAAC

1996人浏览 · 2025-08-07 02:45:22

WAAAAAC · 2025-08-07 02:45:22 发布

前言

在从零开始搭建Vue项目-CSDN博客中我们在VsCode的终端工具中使用Vite前端构建工具创建了一个Vue项目，这个项目具有一定的结构，下面我们来介绍它们的基本意义。

创建好并运行后的项目结构：

我们把这些注释出来：

my-vue-project/
├── .vscode          # VsCode配置文件(不重要)
├── node_modules     # npm install 创建的包库
├── public/          # 静态资源
├── src/             # 源代码
│   ├── assets/      # 图片/字体等
│   ├── components/  # 公共组件
│   ├── router/      # 路由配置(插件 Router)
│   ├── stores/      # 状态管理(插件 Pinia)
│   ├── views/       # 页面组件
│   ├── App.vue      # 根组件
│   └── main.js      # 应用入口
├── .gitgnore        # git忽略文件
├── index.html       # 项目HTML入口
├── jsconfig.json    # JavaScript项目配置
├── package-lock.json # 锁定依赖包的精确版本
├── package.json      # 项目核心配置文件
├── README.md         # 门面文档    
└── vite.config.js    # Vite构建工具配置

配置相关文件

什么是node_modules，package.json，package-lock.json？

我们知道创建项目后要运行 npm install 初始化项目从而生成node_modules这个目录。

那么node_modules 是做什么的呢？

node_modules 用于存放项目依赖的所有第三方库和模块。当你使用 npm 等包管理器安装项目所需的依赖时，这些依赖会被下载并存储在这个目录下。因此这个目录里面的内容会非常大，所以要写入.gitgnore 中。

那么npm 是根据什么来创建和下载这些依赖呢？

当然是我们的 package.json 啦。package.json 是 Node.js 项目的核心配置文件，它定义了项目的元数据、依赖关系、脚本命令等重要信息。它是 npm 生态系统的心脏，管理着整个项目的生命周期。

我们通过npm执行的命令基本都是要安装package.json里面的内容执行。

npm部分命令：

# 安装依赖
npm install                    # 安装所有依赖
npm install package-name       # 安装特定包
npm install -D package-name    # 安装开发依赖

# 卸载依赖
npm uninstall package-name     # 卸载包

# 更新依赖
npm update                     # 更新所有依赖
npm update package-name        # 更新特定包

# 查看依赖
npm list                       # 查看依赖树
npm outdated                   # 查看过期依赖

还有package-lock.json 是 npm 自动生成的文件，它的核心作用是锁定依赖包的精确版本，确保团队成员或不同环境下安装的依赖版本完全一致。

我们看一下package.json里面的内容：可以看到这里有我们的项目名，版本，依赖，构建工具，等。而package-lock.json里面的内容就非常的详细，你们可以点开看一看。

什么是vite.config.js

vite.config.js 是 Vite 构建工具的核心配置文件，它定义了项目的构建行为、开发服务器设置、插件配置、路径别名等重要配置。Vite 是一个现代化的前端构建工具，以其极快的启动速度和热更新而闻名。

这是我们的默认项目配置，只给了我们基本的插件配置(plugins)，还有路径别名(@)。当我们需要更多的配置时，我们就可以在vite.config.js 设置这些开发服务器设置，插件配置之类的。具体可以看Vite的官方文档Home | Vite中文网（这个集合了Vue相关的插件的中文文档，强烈推荐）。

当然，如果运行时出现错误，比如端口占用，单方面的跨域问题等情况，可以在这里修改端口和跨域配置。

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
//服务器配置
  server: {
    host: 'localhost',           // 服务器主机名
    port: 3000,                  // 端口号
    strictPort: false,           // 端口被占用时是否自动尝试下一个
    https: false,                // 是否启用HTTPS
    open: true,                  // 启动时自动打开浏览器
    cors: true,                  // 启用CORS
    // 代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:8080',  // 代理目标
        changeOrigin: true,               // 改变origin
        rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
      }
    },
    // 热更新配置
    hmr: {
      port: 24678,               // HMR端口
      overlay: true              // 错误覆盖层
    }
  },
})

什么是jsconfig.json

jsconfig.json 是 JavaScript 项目的配置文件，它告诉 VS Code 和其他支持的编辑器如何处理您的 JavaScript 代码。它提供了智能提示、代码补全、路径解析、类型检查等功能，极大地提升了开发体验。

这部分基本不需要我们前期去学习的，了解一下就行。

主要相关文件

index.html - 项目HTML入口

如果你运行 npm run build 命令进行打包操作，那么你就会发现你的项目中出现了dist

（简写dist distributable 可分发的）文件，这个文件中由index.html和js，css组成。

结构说明：

dist/
├── assets/
│   ├── index.1a2b3c4d.js       # 主JS文件(带哈希防缓存)
│   ├── vendor.5e6f7g8h.js       # 第三方库代码
│   └── main.9i0j1k2l.css        # 全局样式文件
├── favicon.ico                 # 网站图标
└── index.html                  # 应用入口HTML

这里说明我们的Vue项目最后打包出来的就是一个Html + 多个JS，CSS文件。也就是单页面应用（SPA），我们传统的网页一般是多页面应用（MPA）。而我们的Vue采用组件化开发的方式，通过向一个html页面加载，卸载组件的方式展示网站信息。这里的index.html就是项目HTML入口。这里列一个表格展示SPA和MPA的区别。

场景	SPA方案	传统MPA方案
用户登录	前端路由跳转，API验证	表单提交，服务器返回新HTML
数据展示	AJAX获取JSON，前端渲染	服务器渲染完整HTML
错误处理	全局拦截器统一处理	每个页面单独处理
SEO优化	SSR或预渲染	天然支持
页面过渡效果	Vue Transition组件	整页刷新，效果有限

当然了，Vue不仅仅可以写SPA，也可以写MPA。相关方法以后我会写出来的。

言归正传，通过观察代码，可以发现主要的核心就是

<div id="app"></div> - Vue应用的挂载容器

<script type="module" src="/src/main.js"> - ES模块入口脚本

那么两个就是我们和Vue相关的模块了。这里我们引入一个概念：DOM容器。

DOM（Document Object Model，文档对象模型）是将HTML/XML文档表示为树状结构的编程接口，它定义了：

文档的逻辑结构
访问和操作文档的方法
文档元素之间的关系

例子：

<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <div id="app">
      <p class="text">Hello World</p>
    </div>
  </body>
</html>

对应的DOM树：

document
├── html
│ ├── head
│ │ └── title
│ └── body
│ └── div#app
│ └── p.text

DOM容器是Vue应用的挂载锚点，是连接虚拟DOM与真实DOM的关键桥梁。它的核心特征包括：

挂载目标：Vue应用将在此元素内部渲染
替换行为：默认情况下容器会被Vue生成的DOM替换
作用域边界：定义了Vue应用的作用范围

Vue使用虚拟DOM作为真实DOM的轻量级抽象，那么对应的DOM树就长这样：

// 简化的虚拟DOM表示
{
tag: 'div',
props: { id: 'app' },
children: [
{
tag: 'p',
props: { class: 'text' },
children: 'Hello World'
}
]
}

Vue的渲染流程

模板编译为渲染函数
渲染函数生成虚拟DOM
新旧虚拟DOM对比（使用vue diff算法-CSDN博客）
计算最小更新应用到真实DOM

总而言之，Vue会把我们写的内容替换到<div id='app'></div>里面去。

src/mian.js - JavaScript应用入口

而我们的Vue应用如何识别我们的写的内容呢？

答案是通过mian.js，来控制我们的组件挂载。下面是对main.js的注释

可以看到我们的代码中的核心是与app相关的操作。

const app = createApp(App)

可以看到这个App是从./App.vue 中取来的。我们根据导入的路径到App.vue

import App from './App.vue'

这里看到我们熟悉的Html标签了，说明这个是展示我们内容的主要部分，也就是我们主要写代码的部分。

我们观察一下结构：

正常的script部分，用的是Vue3的组合式语法
<script setup>
导入的组件和插件
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

这里的template相当于DOM渲染的容器，你写的代码将在这里面渲染出来
<template>
  <header>
    图片标签
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">

       导入的HelloWorld组件标签
      <HelloWorld msg="You did it!" />

      <nav>

         导航Router标签
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

   显示导航内容标签
  <RouterView />
</template>

正常的样式标签
<style scoped>
</style>

好了，这样我们就分析完成了。这个App.vue里面包括了一个script标签，里面的内容是JS相关的。一个template标签，里面是渲染内容的。一个style标签，用于写样式。其中，有一个特别的概念需要我们去学习：组件。这里的<HelloWorld msg="You did it!" /> 就是一个组件，里面用了msg来传值："You did it!“。我们观察导入中的路径，发现在components目录下存放的正是名叫HelloWorld组件。

├── src/                        # 源代码

├── assets/    # 图片/字体等

├── components /         # 公共组件

│      ├── icons/

│ ├──HelloWorld.vue

│   ├──TheWelcome.vue

│   └──WelcomeItem.vue

├── router/         # 路由配置(插件 Router)

├── stores/ # 状态管理(插件 Pinia)

├── views/         # 页面组件

├── App.vue        # 根组件

└── main.js         # 应用入口

这样，我们就了解了在Vue项目中组应该在什么地方创建（components 目录下），又该怎么样引入（使用import引入），怎么样使用（使用<组件名/>即可）。

总而言之，mian.js的执行流程应该是：

样式导入 - 加载全局CSS样式
Vue实例创建 - 使用createApp()创建应用
插件安装 - 安装路由、状态管理等插件
DOM挂载 - 将Vue应用挂载到#app元素

其他结构

其他未讲的目录结构如router（Router插件），stores（Pinia插件）等以后会再写文章讲。也可以去看相关的，如Home | Vite中文网下的教程。

my-vue-project/
├── .vscode # VsCode配置文件(不重要)
├── ~~node_modules # npm install 创建的包库~~

├── public/ # 静态资源

├── src/ # 源代码

│         ├── assets/ # 图片/字体等

│         ├── ~~components/ # 公共组件~~

│         ├── router/ # 路由配置(插件 Router)

│         ├── stores/ # 状态管理(插件 Pinia)

│         ├── views/ # 页面组件

│         ├── ~~App.vue # 根组件~~

│         └── ~~main.js # 应用入口~~
├── ~~.gitgnore # git忽略文件~~
├── ~~index.html # 项目HTML入口~~
├── ~~jsconfig.json # JavaScript项目配置~~
├── ~~package-lock.json # 锁定依赖包的精确版本~~
├── ~~package.json      # 项目核心配置文件~~
├── README.md         # 门面文档

└── ~~vite.config.js    # Vite构建工具配置~~