vue-cli 目录结构详细讲解总结

Vue-cli 是一个官方发布的脚手架工具，用于方便地创建 Vue 项目。通过 vue-cli 可以快速搭建一个标准的 Vue 项目开发环境。

而 vue-cli 创建出来的项目默认会有一个相对规范的目录结构，我们来详细讲解一下。

目录结构

├── README.md                     // 项目说明文档
├── babel.config.js               // babel 配置文件
├── node_modules                  // 安装的依赖库
├── package.json                  // 项目依赖与配置信息
├── public                        // 网站公共资源
│   ├── favicon.ico               // 网站图标
│   └── index.html                // 入口 HTML 文件
├── src                           // 源码文件
│   ├── App.vue                   // 应用主组件
│   ├── assets                    // 静态资源
│   │   └── logo.png
│   ├── components                // 组件
│   │   └── HelloWorld.vue        // 示例组件
│   ├── main.js                   // 应用入口文件
│   ├── router.js                 // 路由配置
│   └── store.js                  // vuex 状态管理配置
└── vue.config.js                 // Vue 配置文件

上述目录结构中每个文件夹和文件的含义如下：

• README.md: 项目说明文档，方便团队成员快速了解项目的功能和运行方式。
• babel.config.js: babel 配置文件，用于转换 ES6 代码，使其可以在不同环境下运行。
• node_modules: 存放项目依赖库的文件夹，通过运行 npm install 命令可自动安装相关依赖。
• package.json: 存放项目依赖和配置信息的文件，通过运行 npm init 或 npm init -y 可自动创建。
• public: 存放网站公共资源的文件夹，比如网站图标、入口 HTML 文件等。
• src: 存放源码的文件夹，所有项目开发都在此目录下进行。
• App.vue: 应用主组件，该文件是整个网站的主要组成部分。
• assets: 存放静态资源的文件夹，如图片、字体等。
• components: 存放组件的文件夹，是网站的基础构成单元。
• main.js: 应用入口文件，该文件会在页面加载时首先被执行。
• router.js: 路由配置文件，配置网站路由，可以实现页面的切换。
• store.js: vuex 状态管理配置文件，用于管理整个站点的状态管理。
• vue.config.js: Vue 的配置文件，用于配置 Vue 项目的不同参数和插件。

示例说明

静态资源

在 src 目录中，有一个 assets 文件夹，该文件夹存放了一些静态资源，如图片、字体等。在 Vue 中，如果需要在页面中使用这些资源，可以以下面的方式进行引用：

<template>
  <img src="./assets/logo.png" />
</template>

组件

在 src 目录中，还有一个 components 文件夹，该文件夹存放了一些组件。组件是 Vue 的重要概念，用于复用代码，提高开发效率。一个组件通常由 HTML 模板、JavaScript 代码和 CSS 样式三部分组成。

示例组件代码如下所示：

<template>
  <div>
    <h1>Hello {{name}}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    name: {
      type: String,
      default: ""
    }
  }
};
</script>

<style scoped>
h1 {
  font-size: 50px;
  text-align: center;
}
</style>

在一个 .vue 文件中，三个部分被分别写在了模板、标签和样式部分。其中模板部分由 template 标签括起来，JavaScript 部分由 script 标签括起来，而样式部分由 style 标签括起来。

在使用组件时，可以通过以下方式进行引用：

<template>
  <HelloWorld name="vue"></HelloWorld>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

通过 import 引入组件，然后在 components 对象中注册组件，即可在项目中使用该组件了。

这就是 vue-cli 目录结构的详细讲解总结，希望对您有所帮助。