此处vue cli版本为3.9.3,3.0+版本的项目结构比2.0的简洁
一级目录:hungry、node_modules、src、tests
1:hungry文件夹:hungry是项目名
2:node_modules(library home)文件夹:npm install 安装的依赖代码库
3:public文件夹:
index.html:整个项目的载体
4:src文件夹:存放项目源码。(开发的所有代码都会放在src目录下)
components文件夹:放组件的文件(eg:创建head组件,创建一个目录起名叫head,在Head底下创建一个Vue文件。原因:一个Vue组件,除了.Vue文件外海可能包含图片或其它,所以用文件夹建立)
main.js:入口文件
APP.vue:
Src底下通常也有一个叫Common的目录:用来存放公共资源。Common底下会建3个目录,一个js目录、一个stylus目录和fonts目录。
Stylus:一个CSS pre_processsor预处理器,和LESS和SASS差不多,语法上面由差别。如果只想要LESS或SASS,那就需要把课程中的stylus代码用LESS或SASS替换掉。
5:tests文件夹:测试文件目录
二级目录:.browserslistrc、.editorconfig、.eslintrc.js、~~~~yarn.lock
1:.browserslistrc
2:.editorconfig(编辑器的一些配置)
indent_style = space:indent_style(缩进风格)
indent_size = 2:indent_size(缩进大小是 两个)
trim_trailing_whitespace = true:自动移除行尾多余空格
insert_final_newline = true:当你创建一个文件会在文件末尾加入一个新行
3:.eslintrc.js(eslint的配置文件)
eslint是一个插件化的代码检测工具,可以用于检查常见的代码错误,也可以进行代码风格上的检查,控制代码的质量,提高代码的可读性。在团队协作中,统一的代码风格更具可读性、可维护性。
4:.gitignore(忽略语法检查的目录文件)
5:babel.config.js
6:jest.config.js
7:package.jason(项目的配置文件,一般用来描述一个项目)
npm run deserve:可以在控制台执行的一些命令可以通过script 去配置一些脚本。
dependencies:表示项目生产环境下的一些依赖
“vue”:“^2.6.10”。^表示可以安装从2.6.10开始一直到最新的版本
devDependence编译过程中需要的一些依赖
8:postcss.config.js
9:README.md(项目的一些描述文件)
10:yarn.lock