第三阶段: 理解与修改 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 等我们以后加入的 iviewvuexaxios 等前端开发库都会在这里引入
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 这个文件就是本工程的说明文件, 不多做解释
当我们了解了这些文件后就可以对它们做一些的修改, 使它们变的符合我们的书写习惯 (当然不修改也完全可以运行) 下一篇则重点讲一下我是怎么修改的
来源: http://www.jianshu.com/p/0a63a92d96e1