之前我们在学习 Vue.js 的时候，创建的项目都是直接在 html 文档里链接的需要的资源，比如一些 css 还有 js 文件 ..

现在我们用 vue-cli 创建的这个 webpack 模板项目里面，用了 webpack 打包工具 ... 所以项目的结构跟我们之前见的会有些不一样 ..

这里很多文件你都不用管 .. 大部分都是一些配置文件 .. 我们真正要关心的主要是这个 src 目录下面的东西 .. 我们编写的项目的主要代码都可以放在这个目录下面存储 ..

main.js 是项目的入口文件 .. 这个 import 是 JavaScript 导入模块用的 .. 这里就是导入了 vue 这个模块，导入进来的名字叫 Vue ..

这个 Vue 模块会在 node_modules 目录的下面，用 npm 或者 yarn 安装的包都会在这个目录下面 ..

下面又导入了这个 App ，注意这里导入模块的时候设置了模块的位置 .. 如果不指定模块的位置，就会到 node_modules 下面去找这个要导入的模块，如果设置了位置就在这个指定的位置去导入模块 ..

这里的 App 是个 Vue 组件 .. 在下面创建的这个 Vue 实例里面，用了一下这个 App 组件 ..

App.vue

再打开 App.vue 看一下 .. Vue 的组件可以单独放在这个 .vue 后缀的文件里面 .. 如果你发现没有代码高亮 .. 可以给编辑器安装一个扩展 .. 打开 设置 ... install .. 搜索一下 vue ..

安装一下这个 language-vue ..

完成以后，重新再打开这个 App.vue ..

在这种 .vue 文件里， template 里面的东西是组件的模板 .. script 里面的东西是组件的脚本 .. style 里面的东西是组件的样式 ..

这个 App 组件，用了一个叫 HelloWorld 的组件 .. 在组件的 script 里面，导入了这个 HelloWorld ，位置就是 components 下面的 HelloWorld .. 用 import 导入组件的时候，不需要指定文件的扩展名 ..

HelloWorld.vue

打开 components 下面的 HelloWorld.vue .. 这个组件里的东西就是你在浏览器上看到的这个 Vue 项目的欢迎界面 ..

Hot Reload

我们的 Vue 项目有个很酷的功能叫 Hot Reload ，在开发项目的时候这个功能非常有用。Hot reload 指的就是项目有变化以后，在界面上直接反应出项目的变化，不需要刷新整个页面 ..

比如我们修改一下这个组件里的 msg 这个数据 ... ninghao.net .. 保存 .. 页面并没有刷新 .. 直接会反应出了项目的变化 ..

再修改一下这个 a 标签的样式 .. 改一下这个颜色的值 ...

保存 ...

页面没有刷新 ... 界面上的链接的颜色会变成我们修改之后的这个颜色 ..