上一篇讲完了如何用vue-cli初始化一个vue工程，本篇则主要讲解初始化后的工程包含了哪些文件。
第三阶段：理解与修改vue工程内文件
初始化完了vue工程你就会发现demo文件夹内已经有很多文件了。这些文件有的是配置文件不需要改动，而有的文件则是我们主要编写的对象。下面是工程文件的截图
vue工程内的文件
build文件夹
build文件夹内是负责这个工程的编译配置文件夹，属于不需要我们管的文件夹。这里做一个简单的说明。
build文件夹
-
build.js：这个文件是编译工程程序的入口。也就是说你在编译你刚写完的代码时，内部会执行
node build/build.js。这个程序实际上就是将你的代码交给webpack处理。 -
check-versions.js：这个文件是用来检查当前node和npm的版本。
-
logo.png：这个仅仅是一个图标。
-
utils.js：这里面包含了编译工程时所需的工具，包括处理webpack的所用的loader之类的。
-
vue-loader.conf.js：这个是vue-loader的配置文件，在webpack处理.vue文件会用到这个。本质上也是运用utils.js中的loader处理。
-
webpack.base.conf.js等：这三个文件就是webpack的配置文件，在所有用到webpack的项目中都会包含这三个文件。它们分别表示基本、开发和生产的三种配置，并且可以允许开发和生产两种模式来打包文件。想进一步了解可以点这里。
config文件夹
config文件夹就是对vue工程的基本配置文件夹。现在是默认配置，可以选择改动也可以不改。
config文件夹
-
dev.env.js和prod.env.js：这两个文件内容极少，主要是传出NODE_ENV这个标志来表明两种模式。
-
index.js：这个文件在前面的build文件夹内也多次用到，它就是主要配置文件，包含浏览器监听的主机名和接口、打包后生成的文件的位置等等。这些配置实际上也是交给webpack去处理的。我个人也都采用默认的配置。
src文件夹
src文件夹是最重要的文件夹，我们编写的代码主要都放在这个文件夹中。
src文件夹
-
assets：这个就是放一些静态资源的文件夹，比如放一些图片、音频之类的。在默认的状态下里面已经有一张logo图片了，我们也可以自己决定放什么内容。
-
components：组件文件夹。因为vue工程是前端模块化的工程，所以开发的时候必然少不了组件，而我们所用的组件都应该存放在这个文件夹中。我们也可以将这个文件夹重命名为view，组件放在这个文件夹的子目录中，这样我们可以区分一般的组件和显示页面的组件。
-
router：路由文件夹。这个文件夹内只包含一个文件index.js，这个就是用来组织各个组件之间的联系的。换句话来说，就是将URL映射到不同的组件上。这种映射规则也是有规范的，我们以后再说。
-
App.vue：工程的主组件，是所有组件的入口组件。它会根据根目录下的index.html渲染页面。我们可以在这个文件中添加一些全局样式之类的。
-
main.js：工程的总入口，这个文件目前引入了vue，router等。我们以后加入的iview、vuex、axios等前端开发库都会在这里引入。
static文件夹
这个文件夹内就是包含了静态资源，它与src文件夹中的assets不同的地方在于它不会被webpack处理，是真正的静态资源。
node_modules和其他文件
node_modules是所有node工程都有的一个文件，它是在运行npm install后自动创建的文件夹，里面包含了下载的开发所需要的各种依赖，这个我们一般是不管的。
.babelrc是babel的配置文件，babel是一个常用的前端开发库，它是将javascript的ES6以上版本的代码编译成浏览器可以识别的当前版本代码，这个我们也一般不管。
.DS_Store这个是Mac系统自带的隐藏文件，与工程无关。
.editorconfig是用来统一代码风格的工具，这个我们也不管。
.gitignore是与git工具有关的文件，在这个文件中列出来的文件名是不会上传到GitHub等版本控制网站，就比如.DS_Store这个文件。
.postcssrc.js是与css预处理有关的文件。
index.html就是html文件的模板，所有.vue文件转换成的html文件都会按照这个文件的格式渲染，例如前面的App.vue。
package-lock.json与package.json文件都是用来管理本地npm包的JSON文件也是运行npm命令的依据。比如说当我们运行npm run build这条命令时实际上就是对应scripts字段中的node build/build.js，这也是和之前解释的build文件夹吻合的。
README.md这个文件就是本工程的说明文件，不多做解释。
当我们了解了这些文件后就可以对它们做一些的修改，使它们变的符合我们的书写习惯（当然不修改也完全可以运行）。下一篇则重点讲一下我是怎么修改的。
网友评论