Vue脚手架项目结构分析

文件名

描述

build.js

构建生产环境的代码

check-versions.js

检查 Node.js 环境 和 NPM 的版本

utils.js

构建辅助工具类，类中主要是通过运算，来动态生成 webpack 一些加载器的配置

vue-loader.conf.js

用来配置 sourceMap，项目打包后会对 JS 压缩，sourceMap 用来记录代码压缩前后的对应关系，方便调试

webpack.base.conf.js

webpack 配置文件 - 开发环境和生产环境的通用配置。将基础配置、开发环境和生产环境各对应一个文件比较易于维护

webpack.dev.conf.js

webpack 配置文件 - 开发环境的配置，webpack 打包过程中内容会与 webpack.base.conf.js 合并

webpack.prod.conf.js

webpack 配置文件 - 生产环境的配置，webpack 打包过程中内容会与 webpack.base.conf.js 合并

文件名

描述

dev.env.js

定义开发环境构建时要用的变量

prod.env.js

定义生产环境构建时要用的变量

index.js

定义开发环境和生产环境构建时都要使用的变量

文件名

描述

assets -> logo.png

Demo 中要用的图片，会被 webpack 的加载器当作模块处理，实际项目中的静态资源也建议放在该目录下

components -> HelloWorld.vue

Demo 中定义的组件，实际项目中的自定义组件也建议放在该目录下

App.vue

Demo 中的入口组件，实际项目中的入口组件也建议放在这个位置

main.js

Demo 中的入口文件，里面会定义 Vue 对象，并使用入口组件 App.vue

文件名

描述

static -> .gitkeep

目录内暂时没有内容，git 默认不会管理空目录，所以目录内习惯建一个空文件 .gitkeep，目的是让 git 管理

.babelrc

该文件用来配置 ES 语法适配插件 - Babel

.editorconfig

定义代码风格，使用 IDE 对代码进行格式化时，会参照该文件

.gitignore

用来定义可以被 git 忽略的文件

.postcssrc.js

用来配置 PostCSS 插件的，该插件用来做跨浏览器样式兼容的，能自动添加特殊浏览器的私有前缀

index.html

主页，现在都是单页面应用，所以该 html 唯一的作用就是来驱动 main.js

package.json

npm 配置文件

README.md

git 管理的项目，可以通过该文件来添加项目说明