上一篇讲完了如何用vue-cli初始化一个vue工程,本篇则主要讲解初始化后的工程包含了哪些文件。
第三阶段:理解与修改vue工程内文件
初始化完了vue工程你就会发现demo文件夹内已经有很多文件了。这些文件有的是配置文件不需要改动,而有的文件则是我们主要编写的对象。下面是工程文件的截图
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工程的基本配置文件夹。现在是默认配置,可以选择改动也可以不改。
dev.env.js和prod.env.js:这两个文件内容极少,主要是传出NODE_ENV这个标志来表明两种模式。
index.js:这个文件在前面的build文件夹内也多次用到,它就是主要配置文件,包含浏览器监听的主机名和接口、打包后生成的文件的位置等等。这些配置实际上也是交给webpack去处理的。我个人也都采用默认的配置。
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这个文件就是本工程的说明文件,不多做解释。
当我们了解了这些文件后就可以对它们做一些的修改,使它们变的符合我们的书写习惯(当然不修改也完全可以运行)。下一篇则重点讲一下我是怎么修改的。