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

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

VUE 3.0项目文件结构解析

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

前言

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

一、VUE 3.0项目文件结构

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

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 文件内容片段：

bash 复制代码

 "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的内容如下所示：

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文件内容如下：

javascript 复制代码

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文件内容如下：

javascript 复制代码

<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

项目启动后如果启动成功会有如下提示：

bash 复制代码

  To create a production build, run npm run build.
 WAIT  Compiling...                                                                                             15:37:14
Compiling...
 DONE  Compiled successfully in 148ms                                                                           15:37:14
  App 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脚本：

bash 复制代码

"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代码风格如下：

bash 复制代码

<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 中的导入和顶层变量/函数都能够在模板中直接使用。

bash 复制代码

<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官方资料以及其他网上资料。