① build 目录内文件介绍
文件名
描述
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 合并
建议每个文件的内容都好好读一下，因为有 webpack 和 npm 的基础，这些配置文件慢慢看还是可以看懂的
② config 目录内文件介绍
文件名
描述
dev.env.js
定义开发环境构建时要用的变量
prod.env.js
定义生产环境构建时要用的变量
index.js
定义开发环境和生产环境构建时都要使用的变量
③ src 目录内文件介绍
文件名
描述
assets -> logo.png
Demo 中要用的图片，会被 webpack 的加载器当作模块处理，实际项目中的静态资源也建议放在该目录下
components -> HelloWorld.vue
Demo 中定义的组件，实际项目中的自定义组件也建议放在该目录下
App.vue
Demo 中的入口组件，实际项目中的入口组件也建议放在这个位置
main.js
Demo 中的入口文件，里面会定义 Vue 对象，并使用入口组件 App.vue
这些文件中的具体内容，就不详细分析了， 因为前面学了那么久的 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 管理的项目，可以通过该文件来添加项目说明
通过 Vue-CLI 构建的是一个标准的单页面应用结构，其生成的各个文件，我相信慢慢看是可以读懂的，以后我们可以按照项目的实际需求对各个配置文件进行修改，达到想要的效果
④ node_modules
用于存放项目中用到的依赖
二、单文件组件.vue文件的结构在构建后的项目中会看到一种以.vue作为后缀的文件。
以下为一个vue文件的基本结构，可以简单理解为就是一个个页面。当然有些vue文件可能是可复用的组件。*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和 。
template：每个vue文件都使用template包裹静态代码部分，内部定义的是模板类内容，模板只能有一个根节点。
export default：将当前组件导出后其它组件可以使用import引入，也可以将当前组件进行全局注册或局部注册。其中的name为组件名称，此时不需要提供el节点来指定挂载DOM。
style：样式，加上scoped表示样式只对当前组件有效，否则当前组件定义的样式，如果同时加载了多个组件，组件中恰好都有这个样式，可能会互相干扰。通过scoped避免。其余定义在不加scoped注释的style标签中的样式为全局样式，会对所有的组件都有效果。
其余静态资源：建议放在assets目录下
三、执行原理分析main.js为整个项目的入口文件，构建了当前项目的根实例，这个根实例挂载到index.html页面的#app节点中，这个根实例加载了App.vue对应的根组件并在页面中进行渲染。由于App.vue中存在（路由）标签，因此这块区域会发生跳转，因为默认访问的路径是/路径，所以在router中index.js配置的路由信息里面，/对应跳转的是HelloWorld这个组件，所以页面中会出现App.vue中固有内容以及HelloWorld.vue中的内容。
