Vue 3：玩一下web前端技术（二）

Lion King

已于 2023-07-28 22:14:02 修改

阅读量356

点赞数

分类专栏： web前端技术文章标签： vue.js 前端 javascript

于 2023-07-28 15:36:28 首次发布

本文链接：https://blog.csdn.net/weixin_43431593/article/details/131979146

版权

web前端技术专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了Vue3项目中Vue-cli生成的目录结构，强调了理解目录结构对于文件组织、开发流程和扩展性的重要性。文章还列举了项目一级目录的关键文件，如.src、.public、.vscode等，并解释了.src目录下的组件和资源管理。此外，文章讨论了VueCLI作为项目脚手架的益处，包括快速初始化、模块化开发和配置灵活性。

摘要由CSDN通过智能技术生成

前言

本章内容为VUE目录结构解析与相关工程技术讨论。

上一篇文章地址：

Vue 3：玩一下web前端技术（一）_Lion King的博客-CSDN博客

下一篇文章地址：

Vue 3：玩一下web前端技术（三）_Lion King的博客-CSDN博客

一、目录结构

1、为什么要了解目录结构？

很简单，可以让你知道你的代码要往哪写。

Vue-cli是一个官方提供的脚手架工具，它可以帮助我们快速创建一个基于Vue.js的项目，并提供了一些常用的配置和工具。

了解目录结构的好处有以下几点：

（1）文件组织：Vue-cli生成的目录结构将项目的不同部分组织得很清晰。主要的文件和文件夹包括：src文件夹（存放源代码），public文件夹（存放公共静态资源），package.json（项目的依赖配置）等等。通过熟悉这些文件和文件夹的作用，可以更好地组织和管理我们的项目代码。

（2）开发流程：Vue-cli的目录结构也反映了Vue.js的开发流程。src文件夹是项目的主要代码存放位置，其中包括了主组件、路由配置、Vuex状态管理等。通过理解不同文件的作用和关系，可以更好地进行开发和维护。

（3）扩展性：Vue-cli生成的目录结构是可扩展的。我们可以根据项目的实际需求，自行添加、修改或删除一些文件夹和文件。例如，可以添加自定义组件库、配置文件等等，使项目更符合我们的需求。通过了解目录结构，我们可以更好地进行这些扩展。

总结起来，了解Vue-cli生成的目录结构有助于我们更好地组织和管理项目代码，理解Vue.js的开发流程，并为项目的扩展性做好准备。

 D:\VScode\Projects\my-project 的目录

2023/07/28  02:29    <DIR>          .
2023/07/28  02:48    <DIR>          ..
2023/07/28  02:04               231 .gitignore
2023/07/28  02:29    <DIR>          .vscode
2023/07/28  02:04                73 babel.config.js
2023/07/28  02:04               279 jsconfig.json
2023/07/28  02:12    <DIR>          node_modules
2023/07/28  02:04           428,164 package-lock.json
2023/07/28  02:04               886 package.json
2023/07/28  02:04    <DIR>          public
2023/07/28  02:07               322 README.md
2023/07/28  02:04    <DIR>          src
2023/07/28  02:04               118 vue.config.js
               7 个文件        430,073 字节
               6 个目录 249,253,941,248 可用字节

以上的目录结构备注如下，加粗部分为重点：

- .gitignore: 用于指定需要忽略的文件或文件夹，通常用于版本控制管理。
- .vscode: 用于存放VS Code编辑器相关的配置文件。
- babel.config.js: Babel配置文件，用于指定转译规则和插件。
- jsconfig.json: 用于配置JavaScript项目支持的编辑器功能，比如自动补全等。
- node_modules: 存放项目依赖的第三方库和模块。
- package-lock.json: 存放项目依赖的详细版本信息，以保证每次安装的依赖一致性。
- package.json: 存放项目的配置信息和依赖列表。
- public: 存放公共文件，比如图片、字体等，不会被打包处理。
- README.md: 项目的说明文档。
- src: 存放项目的源代码文件。
- vue.config.js: Vue项目的配置文件，用于自定义构建配置等。

3、src目录结构

下面是src目录中每个文件和文件夹的作用，注意加粗部分为重点：

- App.vue：是Vue项目的根组件，包含项目的整体布局和逻辑。
- assets文件夹：用于存放项目使用的静态资源，如图片、样式表等。
- components文件夹：用于存放项目中的各个组件，每个组件通常包含一个.vue文件，用于定义组件的模板、样式和逻辑。
- main.js：是项目的入口文件，用于初始化Vue应用并引入根组件。

这些文件和文件夹是构建Vue项目的基础，可以根据需要添加、修改或删除它们来满足项目的需求。例如，你可以在components文件夹中创建新的组件来扩展项目的功能，或在assets文件夹中添加新的静态资源。同时，你还可以在App.vue中更改整体布局和逻辑，或在main.js中添加其他初始化操作。

总之，src目录是Vue-cli项目中存放源代码的核心目录，你可以在这里进行项目开发和定制化。