分析vue的目录和项目代码

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

1.首先看主页面入口index.html页面:
分析vue的目录和项目代码

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

2.文件:HelloWorld.vue
分析vue的目录和项目代码

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

值得注意的是,template模板直接子级不能一样。比如下图:
分析vue的目录和项目代码

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

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

分析vue的目录和项目代码

4.文件: index.js
这个js文件是配置路由的页面。
分析vue的目录和项目代码