# 高效学习脚手架目录全解析? 让你赢在起跑线！

标签：起跑线 vue 项目 App js 组件脚手架解析页面

脚手架目录全解析? 一篇文章轻松搞懂!

根目录下

根目录下的

在这里插入图片描述

标识的三个文件为核心文件, 决定了当前Vue项目的运行

.babel.config.js (babel 配置文件)
用于定义项目的 Babel 转译规则。Babel 是一个 js 编译器，用于将现代 js 转换得可兼容旧版浏览器/ 运行环境
jsconfig.json
配置js语法提示
node_module
用来放整个项目的依赖
package.json
描述项目的基本信息、依赖、脚本和其他配置。也是 Node.js 项目必备的文件。就算把 node_module 删除了, 也能通过该文件将所有依赖全部安装回来
README.md
介绍项目的文件，以 Markdown 格式编写，项目说明文档。能帮助开发者或用户快速了解项目目的、功能、使用方法以及如何参与开发。
config.js
1. 环境变量管理：根据开发、测试、生产环境加载不同配置。
2. 全局配置：统一存储 API 地址、默认参数等。
3. 减少硬编码：避免将配置信息直接写在组件中，便于修改和复用。
  
  什么是硬编码 ?
  
  代码中直接写入固定的值（如配置参数、路径、账号密码等），容易导致代码的可维护性和灵活性降低。

public 目录下

favicon.ico 项目图标
index.html
脚手架的入口，用于定义基础结构，Webpack 会将打包后的资源（如 CSS、JS）自动插入到其中。
- 样貌
```
<!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>
    
  </body>
</html>
```
- 具体剖析：
  - <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  - 占位符注入：<%=... %>
    index.html 中的特殊占位符会在构建时被替换为实际内容。
    代码部分 <title><%=... %></title> 构建时会被替换的网页标题 (这里是 HtmlWebpackPlugin 插件传递的 title 值)
  - 降级支持 (兼容)<noscript></noscript>
    
    提示用户启用 js
    - 为禁用 js 的用户提供反馈信息，表示该网页没有 js 无法运行, 引导用户开启js
    - 避免用户在页面空白的情况下误以为网站有问题或无法访问
  - 提供挂载点 <div id="app"></div>
    
    Vue 应用的渲染会在此 div 中

src 目录

src/componet 目录

用来存放组件。使得独立的 UI 单元可以复用。

组件是什么?

可复用的独立 UI 单元，由以下部分组成：模板 (标签)、渲染逻辑 (js) 和 样式 (css)。目的是通过组件的方式构建灵活、可扩展的界面。
- 该目录文件一般是通用组件或局部组件，它们可能会在多个页面或其他组件中复合使用。
- 示例：
```
src/
└── components/
    ├── Header.vue
    ├── Footer.vue
    ├── Button.vue
    └── Modal.vue
```
  - Header.vue 和 Footer.vue 代表页面中的头和尾的组件, 可以全页面通用。
  - Button.vue 通用按钮组件，可以在不同的表单或操作中按需引入/导入使用。
  - Modal.vue 提供一个通用的模态框功能。

src/asset 目录

用于存放静态资源文件，用于组件或页面中引用。例如 logo
常见内容

src/
└── assets/
    ├── images/    # 图片文件
    ├── fonts/     # 字体文件
    ├── styles/    # 全局样式文件
    └── icons/     # 图标文件

使用示例 : 引用logo
使用 @/assets 作为别名，可以方便地在组件中引用资源。

<template>
<img :src="logo" alt="Logo" />
</template>

<script>
     export default {
          data() {
               return {
                    logo: require('@/assets/images/logo.png'),
               };
          },
     };
</script>

使用实例 : 引用全局样式
```
import '@/assets/styles/global.css';
```

src/App.vue 文件

前言

在脚手架项目中, 不再使用模板语法 : ‘{{ }}’

<div id="app">
     {{ msg }}
</div>

而是在 App.vue 中写, 也就是说, <div id="app"> 的内容就是 App.vue 给渲染的,

开始

介绍
App.vue 是 Vue 项目中默认的根组件，它是整个项目组件基础的 结构入口，负责组织和管理应用的整体结构。它通常包含应用的布局、全局样式和路由视图。主要定义页面的基本布局和结构
- 路由是什么?
  类似于控制页面切换, 以及对组件进行排布、整合的方式
  
  也就是说, 路由的核心在于 根据 URL 的变化加载和显示对应的页面或组件。
核心作用
1. 作为根组件：
  - 所有组件的父组件，其他页面和组件会作为其子组件呈现。
  - 作为控制渲染路由的定义的内容。
2. 引入全局资源：
  - 全局样式、第三方插件、字体文件等可以在这里引入。
3. 集成路由和状态 (数据/变量) 管理

src/main.js 文件

Vue 项目中的 技术入口，主要职责是初始化页面，并将根组件 App.vue 挂载到

<div id="app"> 标签上

main.js 和 App.vue`的作为入口的区别

文件	入口角色	具体作用
`main.js`	项目的技术入口	- 初始化整个 Vue 项目。 - 注册全局工具（路由、状态管理、样式）。 - 将``App.vue` 渲染到页面上。
`App.vue`	项目的结构入口	- 根组件，定义页面的布局框架。 - 包含全局组件（如导航栏、侧边栏、页脚等）。 - 提供路由，加载动态页面内容。

两者协作关系
1. main.js 负责启动和加载 App.vue：
  - main.js 是整个应用的“引擎”，负责 启动 Vue 应用。
  - 它将 App.vue 作为 第一个被加载的组件，挂载到 <div id="app">。
  - 所以，main.js 更像是项目的技术入口点。
2. App.vue 是页面的核心结构框架：
  - App.vue 是 第一个被渲染的组件 所以也因此称之为根组件，它定义了应用的基本布局。
  - 通过路由和其他子组件，动态加载内容并组织页面结构。
  - 因此，App.vue 是项目的结构入口点。
总结
1. 技术入口：main.js
  - 启动 Vue 应用。
  - 加载和渲染根组件。
2. 结构入口：App.vue
  - 定义页面的基本布局和结构。
  - 动态加载和展示内容（通过路由）。

end

其他小技巧

打开项目时最好在该项目根目录下右键选择开发软件 (idea、vscode) 打开, 工程化项目最好都这样打开, 不要出现多个项目同级目录的情况, 因为语法检测会让当前项目变得不稳定, 所以这样打开项目一般是最好的*

如果这篇文章帮到你, 帮忙点个关注呗, 点赞或收藏也行鸭～ (｡•ᴗ-)✧

在这里插入图片描述 '(இ﹏இ`｡)

标签：起跑线,vue,项目,App,js,组件,脚手架,解析,页面
From： https://blog.csdn.net/2403_89128801/article/details/144303466

# 高效学习脚手架目录全解析? 让你赢在起跑线！

脚手架目录全解析? 一篇文章轻松搞懂!

根目录下

public 目录下

src 目录

src/componet 目录

src/asset 目录

src/App.vue 文件

前言

开始

src/main.js 文件

end

相关文章

赞助商

阅读排行

# 高效学习 脚手架目录全解析? 让你赢在起跑线！

脚手架目录全解析? 一篇文章轻松搞懂!

根目录下

public 目录下

src 目录

src/componet 目录

src/asset 目录

src/App.vue 文件

前言

开始

src/main.js 文件

end

相关文章

赞助商

阅读排行

# 高效学习脚手架目录全解析? 让你赢在起跑线！