Vue学习笔记02 ---- Vue 的官方CLI项目的目录结构

Vue 的官方CLI项目的目录结构：

 

从下往上看：

 

（1）README.md：  关于你这个项目的一些信息，也是挺常见的东西了。可以在这里介绍一下项目的内容、项目的使用方法和特色等你想告诉别人的东西都可以写进去，不会影响项目的结构。

 

（2）package.json:  package.json是你用npm之后会产生的文件，里面的内容主要是记录关于这个项目用到的第三方包；作用是让其他人下载了这个项目后可以知道项目用了什么包然后去下载这些包再运行项目；其中还可以设置一些npm的快捷指令（不怎么用）。 

 

（3）package-lock.json:  和package.json 一起联用的，算是对package.json的一些详细补充。里面的内容是当前项目中第三方包的详细版本信息,因为package.josn中的第三方包信息只有名字和最高版本没有确切应该用什么版本，所以这个文件中就包含了项目开发的时候用的包的版本，可以给后续别人开发更方便快捷的配置环境。

 

（4）index.html: Vue项目的主页，这个网站打开的首页。

 

（5）postcsssrc.js:  用来配置postcss的文件。不了解 postcss可以看官方介绍。 例子：最常见的就是各个浏览器对某些css属性的加个前缀

#grad {

  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

  background: linear-gradient(red, blue); /* 标准的语法 */

}

 

（6）.gitignore:   git设置忽略文件。用git经常会见到的文件了，就是用来设置在git提交时忽略哪些文件的。

 

（7）.eslintrc.js：对你代码中的一些规范做检测，检测代码是否符合规范。这个文件不常用

 

（8）.eslintignore： 顾名思义，这个文件记录不需要进行代码规范检测的文件。也不是很常修改。

 

（9）.editorconfig：规定编辑器的一些配置，缩进，字符集等

 

（10）.babelrc：babel的配置。babel是用来转译js的工具，通过babel将js转为机器或浏览器认识的编码。

 

（11）static： 存放项目静态文件的文件夹。

 

（12）src：项目的主要代码文件源文件夹。可以打开看下目录结构：

里面有放资源的assets    还有放单文件组件的components    还有router用来放Vue路由文件的  

其中App.vue是项目主页的根组件         

main.js是整个项目的入口。我自己理解就是index.html的js文件。

 

（13）node_modules : 放第三方包（模组）的文件夹

 

（14）config：放项目配置文件的文件夹。主要是些环境配置文件。一般不修改。

 

（15）build：创建webpack项目自动创建的一些文件。