【手把手撸vue项目】vue欢迎页解析

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

image.png

src目录如图所示：

image.png

1、mian.js——项目的入口

image.png
mian.js主要负责引入vue，创建vue实例，引入根组件，路由配置以及插件等。
我们可以看见，其中引入了App.vue文件（引入的时候.vue可以省略），并在下面作为根组件进行了使用。
在后期，我们将会在main.js中引入我们安装的插件。

2、App.vue——根组件

image.png
image.png
其中：
assets为静态资源存放点，主要存放css，外部js等
<router-view/>可以理解为存放路由跳转页面的容器。
由于vue是单页面的应用，页面跳转是通过路由来进行模仿的，其实并没有发生真正的跳转。
<router-view/>中的内容存放的是vue-router指定的内容。

3、router/index.js——路由配置

在这个文件中，我们可以进行路由配置，包括子路由等，也可以通过导航守卫进行路由限制。
举个例子：某些页面需要登录，跳转到这些页面的时候，我们就将其进行拦截，跳转到登陆页面去。这部分内容后期会进行讲解。

image.png

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

routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]

path:url访问的路径，这里的‘/’表示在http://localhost:8080/#/的时候进行访问。
name:这个router的名字，跳转时也可通过name来指定跳转到哪个路由中。
component:顾名思义，表示使用的哪个组件。

3、components/HelloWorld.vue——欢迎组件

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

image.png