VUE脚手架目录结构

预计阅读时间1 分 548 views

0 前言

恭喜各位小伙伴创建了属于自己的第一个vue项目，已经实现了从0到1的飞跃，正式踏入vue项目学习的大门，那我们现在开始就是要想了解，我们这个项目的文件夹结构是什么样的，然后每个文件夹都有什么用，然后我们才能更好的去学习如何根据需求去进行开发。

PS：如果没有看如何创建vue项目的或者项目结构不一样的，可以看下面这篇文章。

1 目录结构

my-vue-app/
├── node_modules/          # 依赖的第三方模块
├── public/                # 公共文件，不会被打包
│   ├── index.html         # 应用的入口 HTML 文件
│   └── favicon.ico        # 网站图标
├── src/                   # 项目源代码
│   ├── assets/            # 静态资源文件，如图片、字体等
│   ├── components/        # Vue 组件
│   ├── router/            # 跳转路由
│   ├── ─── index.js            # 跳转路由文件
│   ├── store/            # vuex的状态控制文件夹
│   ├── ─── index.js            # 状态变量文件
│   ├── views/             # 页面组件，我们开发的页面就是写在这
│   ├── ─── AboutView.vue            # 示例页面文件
│   ├── ─── HomeView.vue            # 示例页面文件
│   ├── App.vue            # 根组件
│   └── main.js            # 应用入口文件
├── .gitignore             # Git 忽略文件配置
├── babel.config.js        # Babel 配置文件
├── package.json           # 项目配置和依赖
├── README.md              # 项目说明文件
├── public/                # 静态文件，不会被 webpack 处理
├── dist/                  # 打包输出目录，包含最终生成的文件
└── vue.config.js          # Vue CLI 配置文件

接下来，我将简要介绍一些关键目录和文件的作用：

src/: 这是项目的主要源代码目录。
- assets/: 存放静态资源文件，如图片、字体等。
- components/: 存放可复用的 Vue 组件。
- router/:存放页面跳转的文件。
- store/:存放状态变量的文件。
- views/: 存放页面级组件，我们开发的页面就是放在这里。
- App.vue: 根组件，应用的主入口。
- main.js: 应用的入口文件，包含 Vue 实例的创建和挂载。
public/: 这是存放不需要经过 webpack 处理的静态文件的目录。
- index.html: 应用的入口 HTML 文件，包含根 DOM 元素和其他配置。
- favicon.ico: 网站图标。
node_modules/: 由 npm 安装的项目依赖模块。
dist/: 这是打包输出目录，包含通过构建工具（如 webpack）生成的最终文件。
babel.config.js: Babel 配置文件，用于配置 JavaScript 转译器 Babel。
package.json: 项目配置文件，包含项目的元数据和依赖信息。
README.md: 项目的说明文档。
.gitignore: Git 忽略文件配置，指定哪些文件或目录不被纳入版本控制。
vue.config.js: Vue CLI 配置文件，用于配置 Vue CLI 的一些行为，如输出路径、代理等。

而这里我们会在后面的慢慢一个个讲解每个文件夹的做，而这里我们初入门先了解App.vue文件和view文件夹。

2 App.vue文件

App.vue文件是我们项目页面的根文件，什么意思呢？

我们vue项目启动后，就会读取App.vue文件，App.vue文件就是我们项目的根文件。

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> 
  </nav>
  <router-view/>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

上面的<router-view/>标签，可以获取到我们写的其它页面。

2 view文件夹

2.1 作用

用来存放我们的页面的文件夹。比如我们示例页面的首页，就是存放在view文件夹下。

本次课程就先了解view文件夹，后续的课程我们会从view文件夹逐步扩展开了解其他文件夹的作用。

3 结语

以上就是我们创建的项目的目录结构，以及我们了解了重点的view文件夹，

接下来我们就在首页页面HomeView.vue开始入门学习vue的基本语法，让小伙伴们快速开始制作一个属于自己的页面。