一、脚手架项目目录结构
①?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>,?<script>?和?<style>。
?
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-view>（路由）标签，因此这块区域会发生跳转，因为默认访问的路径是/路径，所以在router中index.js配置的路由信息里面，/对应跳转的是HelloWorld这个组件，所以页面中会出现App.vue中固有内容以及HelloWorld.vue中的内容。