1.4.3　Vue框架的内容结构

前面学习了如何安装Vue，通过Vue CLI或Vite都可以自动化生成一个基础的项目。下面通过Vue CLI创建的默认项目一起来了解一下Vue的项目结构（使用Vite创建的项目结构与Vue CLI创建的结构类似，不再赘述）。

首先，笔者使用Vue CLI创建了一个叫demo1的、包含babel和eslint的默认配置的工程作为示例，创建好的默认预设项目内容结构如图1.11所示。

其中：

●　README.md文件是项目的说明文件，可根据需要进行编辑。

●　package.json记录了项目的信息，包含名称（name）、版本（version）等，是npm和yarn存储所有已安装软件包的名称和版本的地方（dependencies生产依赖、devDependencies开发依赖），开发时允许通过npm或yarn等工具的命令行运行的脚本（scripts，可通过运行npm run serve启动服务器）和一些其他配置，如图1.12所示，Vue CLI创建的默认项目中还包含eslint的配置信息（eslintConfig，该配置在项目根目录下不存在其他eslint配置文件的情况下会被eslint解析来做JavaScript代码风格检测和自动化格式等）和目标浏览器及其版本的信息（browserslist，该字段会被用来确定需要转译的JavaScript特性和需要添加的CSS浏览器前缀）。

●　pakage-lock.json文件跟踪pakage.json文件内被安装的每个软件包的确切版本，以便其他人可以用相同的版本安装依赖。

●　babel.config.js文件是babel的编译配置文件，指定babel将代码转译的JavaScript特性，其内容如图1.13所示（定义使用一个预设，后续Element的按需加载也会修改此文件，这里不详述）。

●　.gitignore文件是在提交git时要忽略的文件，通过git status命令不会显示出变化，例如Vue CLI创建的默认项目忽略了node_modules、dist和本地环境文件、日志文件和编辑器相关文件的变更（见图1.14）。这些文件不影响项目功能或者很容易通过其他方式生成，又或者是开发者的个人开发习惯配置等，忽略它们可以保持项目的结构整洁。

●　node_modules文件夹存放的是通过npm install安装的所有项目依赖。

●　public文件夹存放的是一些公用文件，比如图1.11的public文件夹中有两个文件，一个是图标，另一个是通用的index页面。

●　src文件夹是工作中经常用到的目录，其中assets目录存放的是一些静态资源（如css、image）。

●　components文件夹用于存放通用的组件，项目创建初默认会有一个HelloWorld组件，其实就是项目初始化时Home这一页的内容，在之后的开发中经常会用到这个目录。

●　App.vue文件是Vue页面资源的首加载项，项目的主要组件，可以当作网站首页，所有页面都是在App.vue下进行切换的，是整个项目的关键。它主要包含3部分（见图1.15）：

➢　模板（template）部分，页面的布局结构都写在这里。

➢　脚本（script）部分，页面的处理脚本都写在这里。

➢　样式（style）表，页面的样式内容都写在这里。

●　main.js文件是项目的入口文件，项目中所有的页面都会加载这个文件，所以这个文件处理着所有页面的公共逻辑，所有项目中的全局依赖都应该在这个文件中引入或注册。用Vue CLI创建的默认项目中的main.js内容如图1.16所示。

可以看到在main.js中引入了项目的主要组件App.vue，然后通过Vue的createApp方法创建了Vue实例，并通过mount方法将实例挂载到id为app的节点上。在默认项目中，这个main.js只有3行代码，还是非常简单的，后续项目中用到的element、router、store和其他自定义的全局文件和操作都会陆续写入这个文件，将在后续章节逐步说明。