Vue项目文件代码介绍

在webstorm中打开项目文件

最外层文件

从下到上介绍起：

README.md => 项目说明文件

package-lock.json => package的一个锁文件，确定安装的第三方模块的版本

package.json => 第三方模块依赖

LICENSE => 开源协议的说明

index.html => 项目默认的首页模板文件

postcssrc.js => 对postcss的配置项

gitignore => 上传时不想上传的特殊文件配置到该文件中，可避免提交

editorconfig => 配置编辑器里的语法

babelrc => 对Vue单文件组件做语法上的转化

（eslintrc.js => 代码规范

eslintignore => 里面存放不受eslint检测的文件

）这两个文件图片上没有，选择了用eslint规范代码则会有这两个文件

static目录：存放静态资源，图片、json数据等

 

src目录：整个项目的源代码

main.js => 项目入口文件

App.vue => 项目最原始的根组件

router => 项目所有路由存放处

components => 项目用到的组件

assets => 项目用到的图片类的资源

 

node_modules目录：项目依赖的第三方node的包

config目录：项目配置文件

prod.env.js => 线上环境配置信息

index.js => 基础配置信息

dev.env.js => 开发环境配置信息

build目录：项目打包webpack内容

webpack.prod.conf.js => 线上webpack配置项

webpack.dev.conf.js => 开发环境webpack配置项

webpack.base.conf.js => 基础webpack配置项

 

├── node_modules  // 项目依赖包文件夹
├── build   // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config  // 项目基本设置文件夹
│   ├── dev.env.js  // 开发配置文件
│   ├── index.js  // 配置主文件
│   └── prod.env.js  // 编译配置文件
├── index.html   // 项目入口文件
├── package-lock.json  // npm5 新增文件，优化性能
├── package.json  // 项目依赖包配置文件
├── src    // 我们的项目的源码编写文件
│   ├── App.vue  // APP入口文件
│   ├── assets  // 初始项目资源目录，回头删掉
│   │   └── logo.png
│   ├── components // 组件目录
│   │   └── Hello.vue // 测试组件，回头删除
│   ├── main.js // 主配置文件
│   └── router // 路由配置文件夹
│       └── index.js   // 路由配置文件
└── static // 资源放置目录