30 分析脚手架结构

通过脚手架创建项目之后，分析里面的结构以及文件，各有什么样的作用

将项目通过vscode打开，有以下几个结构

30.1 .gitignore

这是一个git的忽略文件，哪些文件或者文件夹不想接受git的管理，就在这里配置

30.2 babel.config.js

babel的控制文件，用于babel进行转化语法

这个文件挺重要的，但是一般不需要我们写内容

30.3 package.json

只要打开的工程符合npm规范，那么一定会有package.json(包的说明书)

里面有一些名称，版本以及依赖和基本命令

30.4 package-lock.json

包版本控制文件

30.5 README.md

成熟的项目都会有的一个文件，是对项目的说明，如何使用等，vue团队给我们提供了一些基本命令

30.6 src目录

src目录非常重要

main.js

它是程序的入口，执行npm run serve之后，就要去执行main.js，我们可以测试下，我把代码注掉，就简单打印下，打开终端输入npm run serve

查看页面，确实有输出，没有页面元素是因为代码被注释掉了，这就验证了执行npm run serve命令之后就会先进入main.js，每一次对vue代码的修改，或者按着ctrl+s保存，就会自动刷新终端

相关注释

App.vue

首先看到从assets文件夹里面引入了一个png图片

assets文件夹

这个assets文件夹在前端项目中也是很常见的，一般放静态资源，视频，网站logo，供多人使用

继续阅读App.vue代码，发现从components文件夹引入了一个HelloWorld.vue的组件

components文件夹

所有组件都放在这里面，除了App.vue,因为它是所有组件的管理者，不需要在同一级

30.7 public文件夹

favicon.ico

首先有一个favicon.ico，它是网站的页签图片

还有一个index.html,它就是整个应用的界面

30.8 总结

├── node_modules 
        ├── public
        │   ├── favicon.ico: 页签图标
        │   └── index.html: 主页面
        ├── src
        │   ├── assets: 存放静态资源
        │   │   └── logo.png
        │   │── component: 存放组件
        │   │   └── HelloWorld.vue
        │   │── App.vue: 汇总所有组件
        │   │── main.js: 入口文件
        ├── .gitignore: git版本管制忽略的配置
        ├── babel.config.js: babel的配置文件
        ├── package.json: 应用包配置文件 
        ├── README.md: 应用描述文件
        ├── package-lock.json：包版本控制文件