【vue2.0入门】认识vue工程

引言

本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容，并不代表这部分内容不重要，只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端，细节技巧性内容，可以在后续的开发工作中自行发现并掌握。

在上一篇文章【vue2.0入门】初始化vue工程中，我们介绍了如何创建一个基础的vue项目，本篇我们将认识一下vue工程目录中各个文件的作用。

一、工程目录介绍

使用 Vue CLI 创建的 Vue 项目通常会有一个标准的文件结构，这有助于开发者快速开始开发并保持项目的整洁和可维护性。

按照初始化教程中引导创建的项目目录应该如下所示：

project1/
├── node_modules/          # 存放项目依赖的 npm 包
├── public/                # 静态资源文件夹，不会被 Webpack 处理
│   ├── index.html         # 主页面模板
│   └── favicon.ico        # 网站图标
├── src/                   # 源代码文件夹
│   ├── assets/            # 存放静态资源（如图片、字体等）
│   ├── components/        # 组件文件夹，存放可复用的 Vue 组件
│   ├── App.vue            # 根组件
│   └── main.js            # 应用的主入口文件，初始化 Vue 实例
├── .browserslistrc        # 主要用于指定项目需要支持的浏览器范围
├── .gitignore             # Git 忽略文件规则
├── jsconfig.json          # 用于配置 JavaScript 项目的设置
├── package-lock.json      # NPM 锁定文件，确保安装的依赖版本一致
├── package.json           # 项目配置文件，包含项目元数据和依赖信息
└── README.md              # 项目说明文档

我将从个人角度按照我认为的重要性介绍几个你需要关注的文件

1. package.json文件

当你拿到一个新的vue工程时，首先要看的就是package.json文件

在这里插入图片描述

scripts对象里存储的就是你在运行vue工程和打包工程的指令，你可以尝试把 serve 替换为 dev，然后你的启动工程的命令就更换为 npm run dev 。
dependencies 和 devDependencies 主要存放各种依赖，依赖就代表别人已经开发好的功能，通过npm仓库下载到本地直接使用。查看 package.json 里有哪些依赖，可以快速的判断你拿到的项目可以支持哪些功能。
其他配置初学阶段暂时无需投入太多精力关注，使用默认配置即可（一般是研发负责人处理这部分东西）。

2. src\App.vue

这是你编码vue文件的主入口

你编写的所有vue页面，或是通过组件形式、或是通过路由形式插入 App.vue 文件中

对照以下两张图：

你项目中的所有页面内容都会插入页面中 id 为 app 的标签内部。
img 标签和之前学习的html表现形式一致。
HelloWorld 标签是单独编写的组件，它内部包含很多东西，但是对外表现仅仅是HelloWorld 标签，这就是vue开发的组件化思想，把复杂的东西封起来，对外表现得简单，方便阅读代码理解页面整体框架逻辑。对照浏览器开发者工具中的 元素 一栏，如下图蓝色框选区域就代表了HelloWorld 标签的内容（两者是等价替换关系）。具体HelloWorld 组件内容，后边再说。

在这里插入图片描述

3. src\components 文件夹

这个路径下主要存放组件，工程默认的生成的 HelloWorld.vue 就是其中一个组件。

组件的工作模式如下图所示：

有个不是很恰当的示意图，不过意思是对的

拿到一个页面后先像左侧一样将页面结构划分清楚。
根据页面结构的复杂程度划分为组件，分而治之。
如果组件中存在通用性功能，那么可以将其提取出来作为公共组件，让每个需要此功能的二级组件使用。
整个过程就是搭积木，搭出一个组件A 后，组件A对于他的父组件来说是子组件，组件A 对于他的子组件来说是父组件。
你在编写每一个组件时只需要关心当前组件分配到的功能如何实现，无需关心其他组件怎么做。最终由webpack打包为一个整体，按照引用规则嵌入 App.vue 中，呈现出整体软件的界面。

4. src\assets 文件夹

这个路径下主要存放项目中需要使用的静态资源，例如：图片、字体、公共的css类文件等。

5. node_modules 文件夹

当你需要启动vue项目时，你就需要关注一下这个文件夹有没有在你的项目根目录中（必须有）

这个文件夹内包含了项目所需的所有依赖，也就是 package.json 中 dependencies 和 devDependencies 包含的依赖项，以及这些依赖在开发时所依赖的依赖项（有点绕口）。

每当我们从git仓库下载项目或是从其他地方拷贝过来的项目，一般都不会携带这个文件夹（体积过于庞大，小的几百MB，大的几个GB）。所以才会有 package.json 文件的存在，我们可以通过以下命令直接从npm仓库中将 dependencies 和 devDependencies 包含的依赖都下载下来。这个过程可能会有点久，而且容易遇到网络错误，所以需要提前配置代理镜像，可以参考：【vue2.0入门】初始化vue工程中介绍的如何设置npm镜像。

执行以下命令即可下载所有依赖：

npm install
#或是简写
npm i

下载完成后，会自动在项目根目录添加一个node_modules 文件夹，无需操心里边文件怎么安排的。

如果日后项目需要新增某个依赖，可以执行以下指令：

# 这个下载的依赖会存放在 `dependencies` 中
npm install 依赖名

# 这个下载的依赖会存放在 `devDependencies` 中
npm install 依赖名 -D

下载完成后， package.json 会自动将依赖名字按照下载的指令对应添加到dependencies 和 devDependencies 配置项中。

6. 其他

在熟悉了以上介绍的文件后，你就可以着手进行vue语法学习以及代码编写了，其他配置文件或是日后需要补充的代码结构，我们在之后的文章里再慢慢补充。

二、安装 vuejs devtools 插件

经过测试chrome浏览器的 vuejs devtools 插件存在一些问题，无法正确的加载插件。所以我建议在开发vue2项目时使用微软的edge浏览器。

1. 下载插件

在edge浏览器的插件市场中搜索 vuejs devtools

插件市场地址：插件市场

注意是下载 6.6.3 版本适配vue2框架。
在这里插入图片描述

2. 配置插件

安装完成后需要做一些简单配置，方便使用

将插件设置为一直可见：

在这里插入图片描述
这样可以保证插件一直在头部导航栏显示，一旦嗅探到某个页面是用vue框架写的，他就会亮起来。表示这个页面可以在开发这工具中打开插件面板，看到项目的一些跟框架相关的信息。

设置可以读取本地启动的项目：

右键vue图标，点击管理拓展

在这里插入图片描述

勾选 允许访问文件 URL，这样开发阶段本地运行的vue项目也可以被嗅探到。

在这里插入图片描述
以上即完成了 vuejs devtools 插件的配置工作

3. 使用插件

当你打开了一个使用vue框架开发的页面时。

在这里插入图片描述

此时按下键盘 F12 或是在浏览器视口中鼠标右键选中 检查 项，进入浏览器开发者工具中，即可查看 vuejs devtools 插件面板。

此时项目比较简单，所以面板内容不是很多，日后功能丰富起来之后，你可以在面板中查询vue项目的一些特殊信息：

vuex或是pinia信息，这是vue项目的全局状态依赖存储的信息。
routes信息，这是vue项目路由依赖存储的软件路由信息。
组件信息，这个展示的是vue项目中各组件在页面中的嵌套关系以及组件内部信息。

三、总结

在熟悉以上文件以及其作用后，接下来我们就开始尝试开展一些vue页面的开发工作了，其他没介绍的内容以及未来可能会新增的内容我们可以边学边补充。
此外我们还介绍了vuejs devtools浏览器插件的下载、安装和使用。方便我们在日后开发vue项目时可以更准确的获取项目运行时的各类信息，提高代码开发效率。

再接再厉~