.vue文件结构解析

关于单文件组件

vue 的单文件相当于一个页面中的 组件 ，包含了关于该组件的 html-css-js 文件集合，

这么做的目的有利于项目的管理和整合，官方说法是有 构建步骤 。

在 <template/>标签下只能有一个子节点元素，如果写多个如 <div/>这样的标签则会报错，

如下所示:

.vue文 件可包含 html-css-js ，webpack自动打包成三个文件？

在.vue文件中，dom结构可以写在<template/>标签下，

而针对该 dom 结构的样式文件则作为 <template/>标签的 兄弟 元素 <style/>存在，

同样的控制该 dom 结构的脚本程序写在另一个兄弟元素 <script/>之中，

这样一来，每个组件自己对应的结构样式都在同一个文件之中，

便不会与其它的组件搞混了。

自我理解的作用：解析转换.vue文件。提取出script，css，template，再分别交给对应的loader去处理。核心就是提取。

官方定义：

1、允许为vue组件的每个部分使用他的webpack loader，例如在style中使用sass，在template中使用Pug

2、允许一个.vue文件中使用自定义块，并对其运用自定义的loader链

3、使用webpack loader将style，template中引用的资源当作模块依赖处理

4、为每个组件模拟出scoped css

5、在开发过程中使用热重载来保持状态

在介绍完简单的项目目录之后，我们对项目自动生成的欢迎页进行讲解（也就是对src目录进行讲解）。

在这个文件中，我们可以进行路由配置，包括子路由等，也可以通过导航守卫进行路由限制。

举个例子：某些页面需要登录，跳转到这些页面的时候，我们就将其进行拦截，跳转到登陆页面去。这部分内容后期会进行讲解。

图中，我们不难看出，默认引入了叫HelloWorld.vue的文件。并在routers中进行了使用。

path: url访问的路径，这里的‘/’表示在 http://localhost:8080/#/ 的时候进行访问。

name: 这个router的名字，跳转时也可通过name来指定跳转到哪个路由中。

component: 顾名思义，表示使用的哪个组件。

在vue项目中，组件存放在components文件夹中，这些组件可以通过路由来进行使用，也可以通过组件间的引入来进行使用。

---