vue3第五幕之【工程结构】分析篇(vue2 vm VS vue3 app)

前言

这篇文章的相关知识在vue3第一幕基础与起步中有过提及，本文相当于是对它的补充，侧重点在vue2的vm与vue3的app。

本文是vue3知识的一部分，主要内容是vue3的工程结构分析。文章会给出工程结构图和具体的解释，以及vue3工程结构的优势。

主要内容

1 工程结构分析

1.1 图示

拿到一个 vue 的项目源代码后，许多初学者对 vue 项目的文件结构感觉眼花缭乱。

首先附上一个简单的 vue 项目结构图

1.2 叙述

vue项目工程结构

node_modules

vue 项目的文件依赖存放在这个文件夹。

public

存放页面图标和不支持 JavaScript 情况时的页面。

package.json

存放项目的依赖配置（比如 vuex，element-UI）。

babel.config.js

babel 转码器的配置文件。

vue.config.js

vue 的配置文件。

yarn.lock

用来构建依赖关系树。

.gitignore

git 忽略文件

src

存放 vue 项目的源代码。其文件夹下的各个文件（文件夹）分别为：

• ​assets​：资源文件，比如存放 css，图片等资源。
• component​：组件文件夹，用来存放 vue 的公共组件（注册于全局，在整个项目中通过关键词便可直接输出）。
• router​:用来存放 ​index.js​，