项目结构介绍

conf:

一些第三方插件配置文件存放的地方, 比如browsersync.conf.js, gulp.conf.js, karma.conf.js, webpack.conf.js 等等.

这些插件具体的功能和如何使用等, 请小伙伴们自行搜索, 就不在本文中讨论了.

gulp_tasks:

这里存放这你每一个, 或者每一组 gulp 的 tasks, 如果需要新增, 建议遵循这个结构, 放在这里.

node_modules:

这个是 npm 的依赖文件夹, 不多说.

src [重点]:

index.html: html 入口文件, 对于单页面应用来说, 所有的html 视图渲染/变换, 都会在这个文件中进行.

index.js: vue的入口 js, 会通过 webpack 等第三方工具自动打入 index.html 中, 当然你也可以不用工具, 手动假如 html 中, 但这不是最佳实践.

index.less: index.html 会自动加载的样式文件, 也可以说是公共的样式存放的地方.

index.spec.js: js 单元测试文件, 所有以*.spec.js 结尾的文件都是单元测试文件.

app: 基本上存放的是各类 components (后面我们会介绍, 什么是 component). 比如 Main.vue 是 main component 的模板和 js 内容. 当然还有它的单元测试文件.

根目录文件:

主要是像一些隐藏文件, 比如.gitignore 忽略提交文件配置等. 还有 gulpfile.js, gulp的入口文件, package.json 依赖配置文件等. 这些都不需要做太多修改.

项目结构优化

我们可以看到 app 文件夹下面的 components, 只有 techs这个 component 是单独存放的文件夹, 其余的, 比如 main 和 header, footer 等都是放在根目录的. 这显然不太合理, 我们应该把他们单独存放文件夹, 以便以后维护.

此外, 以*.vue 结尾的文件是 Vue 特有的文件格式, 它默认是包含了模板和 js 内容的. 这显然也不是很合理, 我们应该将 模板内容, js 内容, style 样式完全分开到不同的文件里, 只有在最后打包的时候, 才会打到一起. 这也是方便了我们的维护和开发, 所以重构过后的目录结构是长这样的:

可以看到 app 下我们新增了 footer, header, main, techs, title 文件夹. 里面分别存放了不同的 模板文件(.vue 结尾) , 测试文件(.spec.js 结尾)和 js 文件. 如果需要新的 component, 那么应该新增一个文件夹, 并且按照层级存放.

 

上一篇:Vue In Action 实战Vue–搭建一个空项目(二)

下一篇:Vue In Action 实战 Vue-从 index 开始(四)