利用node和npm环境我们可以很快的搭建一个vue环境。搭建完成后,我们可以看到生成的文件夹中包括很多文件夹和文件 ,以下介绍每个文件的内容结构都是什么
1.build文件夹
build文件夹是保存一些webpack的初始化配置。
里面是对 webpack 开发和打包的相关设置,包括入口文件、输出文件、使用的模块等
2.config文件夹
主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。
里面有三个文件
1.dev.env.js
先引入了webpack-merge这个模块。这个模块的作用是来合并两个配置文件对象并生成一个新的配置文件,有点儿类似于es6的object.assign();
2.index.js
此配置文件是用来定义开发环境和生产环境中所需要的参数
3.prod.env.js
的内容非常简单,仅仅是导出了一个对象,里面写明了执行环境是“production(生产环境)
3.node_modules
项目的依赖库;
4.src 文件夹
我们主要操作的地方,组件的增加修改等都在这个文件夹里操作
5.static 文件夹
静态资源文件夹,放置不会变动的资源,直接被复制到最终的打包目录(默认是dist/static)下;
6..babelrc文件
使用 babel 的配置文件,用来设置转码规则和插件;
7..editorconfig文件
代码的规范文件,规定使用空格或 tab 缩进,缩进的长度是两位还是四位之类的代码风格,使用的话需要在编辑器里下载对应的插件;
8..eslintignore文件
指定 eslint 忽略的文件
9..gitignore文件
指定 git 忽略的文件,所有 git 操作均不会对其生效
10. .postcssrc.js文件
指定使用的 css 预编译器,里面默认配置了 autoprefixer ,自动补全浏览器前缀
11.index.html
首页文件,项目运行的时候,会自动将我们在 src 文件夹里生成的组件插入这个文件里
12.package.json文件
指定项目开发和生成环境中需要使用的依赖库
13.package-lock.json文件
当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新
14.README.md文件
相当于是一个备注文件,对项目开发过程中需要注意的地方进行一些说明