在上一篇文章末尾，我们执行了npm run serve命令，然后在浏览器访问http://localhost:8080/，就看到了vue项目的欢迎页面，刚刚发生了什么？
项目结构解析
首先粗略讲讲项目中各个文件的作用，我构建出的工程目录如下图所示，其中根目录chap1是我的工程名：
根目录
根目录包含了项目的描述文件(package.json\package-lock.json)，以及一些配置文件(babel\eslint等)，不做过多介绍。
node_module
此处存放了该项目的所有依赖，开发者一般无需手动修改它，但是值得注意的是，node_modules文件夹一般都很大，在执行某些操作时（比如将代码嵌入代码仓库、对项目进行lint等）,一定要排除掉node_moules文件夹。
public
此处存放了不需要被webpack打包处理的静态文件。如果你还不了解webpack，后文会讲解它，在不涉及到原理的情况下，让你大概知道webpack是干什么的。
webpack在打包项目时，会直接复制将public文件夹中的文件，不做任何处理，直接复制目标文件夹的根目录下。
在项目中，我们会有一些静态文件，比如图片、视频等，我们可以通过绝对路径和相对路径两种方式来引用。当通过绝对路径(路径以\开头)，比如：
<img src="/hello.png">
那么可以直接引用到public文件夹下的hello.png。
当前public文件夹中有两个文件：favicon.ico和index.html。其中favicon.ico就是浏览器标签页上的图标，而index.html是webpack打包时，使用的入口模板文件，后面再讲它。
tests
此处存放了项目的所有的单元测试，在讲到单元测试时，我们再讲它，现在先不管它。
src
我们的所有代码，都在src文件夹中，src的结构也不是固定不变，我们之后会对其做一些优化。
assets
也用于存放静态资源文件，与public文件夹中的静态资源有所不同的是，该文件夹中文件会被webpack处理，而不是直接复制。
components
用于存放项目中的组件。什么是组件？粗略的说，工程中的每一个.vue文件，就是一个组件。vue是组件化的，项目由大大小小的多个组件构成，用一种拼积木的方式来构建程序。我个人不喜欢把所有组件都放入components文件夹中，我之后会干掉这个文件夹，并分享一种我个人构建项目的文件夹结构。
router
该文件夹下的index.js，是项目的路由配置，看一下这段代码：
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
这里定义了两个路由，/和/about，分别渲染了Home和About两个组件，其中About组件使用了懒加载。你可以访问下http://localhost:8080/和http://localhost:8080/about。
vuex
上一篇文章有说过，vuex是vue的状态管理器，在讲到vuex时我们再讲它，现在先不管它。
views
用于存放所有页面，当前文件夹中有Home.vue和About.vue两个文件，你在访问http://localhost:8080/和http://localhost:8080/about时，看到的就是这两个.vue文件描述的页面。
App.vue
项目的根组件。vue是组件化的，大致来说，一个vue应用，是一棵组件树，而App.vue，就是这棵组件树的root。
main.js
main.js，是webpack的打包入口文件。
打包
执行npm run serve后，发生了两件事：
- 代码被打包成了另一堆文件
- 启动了一个本地服务器，用于serve刚刚打包生成的文件
上文已经提到过"webpack"、"打包"等术语，他们究竟什么是打包？我经常听到别人也把打包称之为"编译"，我刚开始学前端时，被"编译"这个高大上的词唬得一愣一愣的，然后在脑海中脑补出一堆c++编译、java编译、dll、链接器等东西。首先厘清一点，打包不是编译。
刚刚在浏览项目结构时，我们看到项目中有很多.vue文件，接触过前端的同学应该知道，前端的三大基石：html(结构)\css(样式)\js(行为)，浏览器只认识这三个哥，至于vue文件？Who the fxxk are you？
浏览器肯定是不认识vue文件的，也就是说，我们最终在浏览器中看到的页面，肯定不是我们在src文件夹中写的vue文件。实际上，在webpack中配置了一个vue-loader，它将所有vue文件，都转换成了js文件，粗糙地说，app.vue被转换成了app.js(不一定是这个名字)。实际上，webpack会将一切东西都转换为js。
观察一下src/components/HelloWorld.vue，发现里面有三种基本标签：
<template></template>
<style lang="scss"></style>
<script></script>
template标签内，就是html，会被转换为js。
style标签内，注意lang="scss"，表明我们使用了预处理器sass，顺便说一下sass和scss的故事：css是没有嵌套功能的，写起来很麻烦，比如下面这句：
#app .header { color: blue; }
#app .body { color: green; }
#app .footer { color: yellow; }
然后sass横空出世，它使用缩进来实现了嵌套功能，上面的代码可以写成：
#app
.header color: blue
.body color: green
.footer color: yellow
// 大概是这样吧，可能有错，我也没写过sass
虽然sass很强大，但是很明显，大部分人对缩进表示不适应，所以又出了一个版本的sass，它使用花括号来实现嵌套，上面的代码写作：
#app {
.header color: blue;
.body color: green;
.footer color: yellow;
}
而上面这种使用花括号的sass，就称之为scss。
好了，说完了sass和scss的故事，说回style标签，它里面就是scss代码，会先被转换为css，然后再被转换为js。
然后是script标签，它本身就是js了，不会再被转换了吧？不，也会转换，还记得babel吗？它将js代码翻译成向下兼容的js代码。
好，说了这么多，一句话概括，webpack会将一切东西转换为js，除此之外，还可以执行代码压缩、抽取css文件等等操作，这一系列（转换、压缩、抽取等等）将源码处理成另一堆代码的操作，称之为打包(本人自己的定义，非官方定义)。在这个项目中，经过webpack的打包，我们的源码变成了这样：
我看到有同学举手了，这些文件在哪里，我怎么看不到？
好问题，答案是：这些文件在内存里。
那么问题又来了，既然文件在内存里，我是怎么得到的？别急，这是之后打包部署时的知识点了，我先暂时不告诉你我是用npm run build命令得到的。
现在回答本文最初提出的问题：刚刚发生了什么？
vue-cli打包了我们的源码，将目标文件生成到了内存中，然后在本地8080端口起了一个服务，这个服务负责serve这些内存中的文件。
关于webpack
上文说了很多webpack，那么这个神通广大的webpack到底在哪里？它~存~在，我婶婶的脑海里，哦不，它存在vue-cli里。也许用过vue-cli2的小伙伴会惊奇地发现，整个工程中看不到webpack的配置，要知道，之前写前端，很重要的一部分工作，就是写webpack的配置文件。在vue-cli3之后，webpack已经被整合进了vue-cli，并且包含了一些默认配置(比如vue-loader等)，如果要修改webpack的默认配置，vue-cli也提供了对应的方法，之后会讲。
在下一篇文章中，我们将更加细致地探讨项目中各个文件。
