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

VUE 3.0项目文件结构解析及项目启动流程介绍

news 2025/10/11 13:21:32

VUE 3.0项目文件结构以及项目启动流程介绍

VUE 3.0项目文件结构解析

  • VUE 3.0项目文件结构以及项目启动流程介绍
  • 前言
  • 一、VUE 3.0项目文件结构
    • 1.1 Vue 3.0 项目根目录
    • 1.2 特别说明
  • 二、 VUE 3.0项目文件具体介绍
    • 2.1 node_modules文件夹
    • 2.2 public文件夹下index.html
    • 2.3 src文件夹
      • 2.3.1 src/main.js文件
      • 2.3.2 src/App.vue文件
      • 2.3.3 src\components\HelloWorld.vue文件
  • 三、VUE项目启动
    • 3.1 VUE项目启动流程详解
      • 3.1.1 执行npm run serve
      • 3.1.2 执行vue-cli-service serve
      • 3.1.3 Webpack打包、动态生成HTML文件
  • 四、VUE组件风格
    • 4.1 选项式API与组合式API
      • 4.1.1 选项式API
      • 4.1.2 组合式API
      • 4.1.3 API风格选择问题
  • 总结

前言

很久之前写了一篇关于VUE环境搭建以及项目初建的文章：配置VUE环境过程中 npm报错的处理方案以及VUE环境搭建过程。本文将详细介绍VUE 3.0项目文件结构及项目启动流程介绍。

一、VUE 3.0项目文件结构

VUE 3.0项目新建后，VUE CLI会生成如下所示的内容：
VUE 3.0项目目录结构

1.1 Vue 3.0 项目根目录

  • 以下为显示主要文件夹以及主要文件：
    hello-world
    ├──node_modules # 项目依赖包（通过 npm/yarn 安装，包含 Vue 核心、第三方库等，不提交 Git）
    ├── public #静态资源文件夹（不打包）（webpack 打包时直接复制到 dist 根目录，通过 /xxx 路径引用，如 favicon.ico、robots.txt）
    │ ├── favicon.ico
    │ └── index.html
    ├── src #源代码文件夹（核心业务代码）
    │ ├── App.vue # 项目根组件（页面布局入口，包含路由出口 ）
    │ ├── assets # 静态资源（不经过 webpack 处理，需通过绝对路径引用）
    │ │ └── logo.png
    │ ├── components # 通用组件（非业务绑定，可复用，如 Button 按钮、Input 输入框、Modal 弹窗、Pagination 分页）
    │ │ └── HelloWorld.vue
    │ └── main.js # 项目入口 JS（初始化 Vue 实例、挂载根组件、引入全局依赖）
    ├── .gitignore #
    ├── babel.config.js # Babel 配置文件（ES6+ 语法转译，适配低版本浏览器）
    ├── jsconfig.json
    ├── package-lock.json # 依赖版本锁定文件（确保团队开发环境依赖版本一致）
    ├── package.json # 项目核心配置（依赖管理、脚本命令、项目描述）
    ├── README.md # 项目说明文档（如项目介绍、启动步骤、目录说明、贡献指南）
    └── vue.config.js # Vue 项目自定义配置（如端口号、代理、资源路径、插件配置）

1.2 特别说明

src 文件夹：项目开发的核心目录，几乎所有业务代码都在此编写，需重点关注 views（页面）、components（组件）、store（状态）、router（路由）四大模块的逻辑关联。实际上页面views、状态store、路由router文件夹本身是没有自动创建的，根据项目需要自行创建。
在这里插入图片描述

二、 VUE 3.0项目文件具体介绍

2.1 node_modules文件夹

项目依赖包（通过 npm/yarn 安装，包含 Vue 核心、第三方库等，不提交 Git） 这个文件夹是基于项目作者的npm版本库生成依赖信息。这个文件夹的树状结构信息以及以来下载地址等被记录到了package-lock.json 文件里。
package-lock.json 文件内容片段：

 "node_modules/@aashutoshrathi/word-wrap": {"version": "1.2.6","resolved": "https://registry.npmmirror.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz","integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==","dev": true,"engines": {"node": ">=0.10.0"}},

如果是运行别人的项目，建议删掉node_modules文件夹以及package-lock.json，避免因为npm版本差异导致的报错

2.2 public文件夹下index.html

index.html:是VUE项目的主HTML文件，VUE应用会被挂载到index.html的**div id=“app”**部分
public文件夹下index.html的内容如下所示：

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- VUE应用会被挂在到index.html在这个DIV里 --><!-- built files will be auto injected --></body>
</html>

2.3 src文件夹

  • src文件夹
    是源代码文件夹（核心业务代码）
  • 项目根组件文件 App.vue
    项目根组件（页面布局入口，包含路由出口 ）
  • 文件夹：assets
    静态资源（不经过 webpack 处理，需通过绝对路径引用）默认包含logo.png
  • 组件文件夹： components
    通用组件（非业务绑定，可复用，如 Button 按钮、Input 输入框、Modal 弹窗、Pagination 分页）默认包含一个.vue文件： HelloWorld.vue
  • main.js
    项目入口 JS（初始化 Vue 实例、挂载根组件、引入全局依赖）

2.3.1 src/main.js文件

main.js是VUE项目的入口文件，主要负责初始化Vue实例并将其挂载到 public/index.html的id为app的div里。
main.js文件内容如下：

import { createApp } from 'vue'  //导入VUE createApp对象是一个组件，
import App from './App.vue'   //导入根组件，每个VUE应用都需要一个根组件，页面布局的入口，其他组件作为这个根组件的子组件，这种导入方式为单文件组件，import App from 'vue文件路径'createApp(App).mount('#app')  //应用实例需要调用.mount()方法来实现渲染；.mount(’#id‘)将这个App.vue根组件挂载到public/index.html的id为app的div里
//.mount()方法参数指向的是组件对应的容器，可以是指定是DOM元素或者是CSS选择器字符串
  • 应用根组件内容被渲染到指定元素之后，容器元素自己将不会被视为应用的一部分。

通过.mount()方法挂载应用时，是在整个应用配置与资源注册完成后被调用的，其返回值是根组件实例而非应用实例。

2.3.2 src/App.vue文件

App.vue：VUE项目的根组件，页面布局入口，用于组合与渲染其他组件
新建的VUE项目，自动生成的VUE项目根组件App.vue文件内容如下：

<template><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

app.vue作为根组件，其模板即template标签部分，本身就是组件的一部分。
也可以在挂载容器内编写模板来单独提供根组件模板。
若跟组件内没有template标签部分，Vue则自动选择使用指定的容器的innerHTML作为组件模板。
容器内部模板常用于无构建的Vue应用程序。

2.3.3 src\components\HelloWorld.vue文件

  • src\components文件夹
    components文件夹是通用组件所在文件夹（非业务绑定，可复用，如 Button 按钮、Input 输入框、Modal 弹窗、Pagination 分页）默认包含一个.vue文件： HelloWorld.vue
  • HelloWorld.vue
    这是一个示例组件，在App.vue中被引用和渲染。

三、VUE项目启动

VUE项目启动是通过命令npm run serve
项目启动后如果启动成功会有如下提示：

  To create a production build, run npm run build.WAIT  Compiling...                                                                                             15:37:14
Compiling...DONE  Compiled successfully in 148ms                                                                           15:37:14App running at:- Local:   http://localhost:8091/- Network: http://192.168.0.164:8091/

通过提示的app running at 信息即可访问到项目。

3.1 VUE项目启动流程详解

3.1.1 执行npm run serve

当执行npm run serve命令时，实际是去执行VUE项目根目录下的package.json
的"scripts"部分指定的serve脚本：

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},

可以看到 当在命令行窗口执行npm run serve时实际是执行vue-cli-service serve命令

3.1.2 执行vue-cli-service serve

vue-cli-service是VUE CLI提供的开发服务器，会启动一个基于webpack-dev-server的开发环境，支持热重载和实时编译。

3.1.3 Webpack打包、动态生成HTML文件

  • Webpack是一个模块打包工具，执行vue-cli-service serve时就是通过Webpack工具将VUE项目所有的模块：VUE文件、JavaScript、CSS等等资源进行打包成一个或多个bundle文件。
  • 而当启动基于webpack-dev-server的开发环境时会动态生成一个HTML文件，该文件就会加载VUE项目的入口文件main.js以及其他VUE项目资源的scrip标签。

四、VUE组件风格

4.1 选项式API与组合式API

VUE组件书写风格为选项式与组合式API.

4.1.1 选项式API

包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
例在script标签内部，选项式API代码风格如下：

<script>
export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 `this` 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count++}},// 生命周期钩子会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {console.log(`The initial count is ${this.count}.`)}
}
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>

4.1.2 组合式API

组合式API，可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与script setup 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，script setup 中的导入和顶层变量/函数都能够在模板中直接使用。

<script setup>
import { ref, onMounted } from 'vue'// 响应式状态
const count = ref(0)// 用来修改状态、触发更新的函数
function increment() {count.value++
}// 生命周期钩子
onMounted(() => {console.log(`The initial count is ${count.value}.`)
})
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>

4.1.3 API风格选择问题

学习的过程中，推荐采用更易于自己理解的风格。

  • 在生产项目中：
    当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API。
    当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件。

总结

以上就是本文内容，介绍了VUE 3.0项目文件结构解析及项目启动流程，顺带介绍了VUE组件的API风格。
更多内容可参考VUE官方资料以及其他网上资料。

http://www.dtcms.com/a/467030.html

相关文章：

  • 机器学习入门（2）-KNN,朴素贝叶斯，决策树，随机森林
  • 【RAG】召回增强
  • 把自己的网站卖给别人后对方做违法吗手机自助建站永久免费
  • 【PyCharm】设置注释风格，快速注释
  • 社区服务呼叫系统 网站的建设电商直播平台网站开发
  • 久其软件公司网站俄罗斯网站模版
  • 网站建设用户使用手册海南微信网站制作平台
  • 北京营销网站建站公司定制图片软件
  • 境外网站建设cpa没有网站怎么做
  • 面试题02
  • 如何办网站 论坛保险网站建设方案
  • 网站开发最新书籍有什么好的手机推荐网站
  • 校园网站建设总体设计crm客户管理系统全称
  • 天津网站开发招聘夸克搜索引擎
  • 影视网站seo描述镇江微信推广平台
  • 网站建设有什么优势成都住建厅官方网站
  • K8S（四）—— Kubectl从入门到精通：K8s资源管理与项目生命周期实战指南
  • 如何建设一个双语的网站网站建设网上学
  • 80MW／160MWh共享储能示范项目技术方案
  • 深圳微信分销网站公司做网站的网站赚钱吗
  • 基于单片机的N型热电偶PID锅炉温度控制系统
  • 做爰全过程免费的视频网站有声音杭州企业自助建站系统
  • 东莞做网站设计制作自己的网站怎么做app吗
  • 网站开发培训光山广州11区排名
  • 生鲜网站建设的项目总结wordpress 空行
  • 今日行情明日机会——20251010
  • 制作系统签名(具体在build\target\product\security\README文件有说明)：
  • 网站 备案 初审品牌整合营销机构
  • 做的比较好的返利网站知乎爱做的小说网站
  • 最大字符串配对数目（哈希表实现）