分析vue的目录和项目代码

前面一节我们讲了vue的项目搭建过程，这一节我们就来细说一下项目里面的文件。先大概说一下，后面有时间再详细说。

1.首先看主页面入口index.html页面：

我们可以看到，入口页面基本没有什么，就定义了一个div标签，绑定了一个id,用来设置作用域。

2.文件：HelloWorld.vue

这个文件也没什么可以说的，一个template的展示模板，一个script引入组件，还有个style编写样式代码。

值得注意的是，template模板直接子级不能一样。比如下图：

template下面直接子级还是template的话就会报错，组件只能有一个根元素,就是你这第一个下面必须只有一个根元素,可以使用一个容器元素包裹住,例如:

3.文件：main.js
这个js文件是主页面配置的主入口,引入一些模块。

4.文件： index.js
这个js文件是配置路由的页面。