vue项目架构组件划分和切换

自学vue的童鞋是否跟我一样遇到下列困惑

在小demo中 知道怎么使用组件  及组件的切换  而在真正的项目中却不知怎么使用

首先 我们认识几个重要的文件夹

main.js 管理vue的核心文件 一般使用插件都要在此引入

app.vue  入口文件  相当于一个整个项目的父组件 

先说一下组件化的原因：

为了拆分vue实例代码里的以不同的组件实现不同的功能

主要从ui界面上划分 方便ui组件的重用

一：组件注册

当我们注册组件的时候，使用import  from 的方法 引入文件 再进行组件注册

1.在components文件夹新建一个vue文件  作为一个子组件

2.在app.js中引入  

3.在app这个组件的js中注册，注册只要在components中写上引入文件的名字即可，原理是遵循node语法，再此不做解释

4.在结构中使用 直接用<组件名></组件名>即可使用

二：组件切换  

切换组件有两种方法：

1.使用 if else的方法

<login v-if="flag"></login>

<lansi v-else="flag"></lansi>

2.使用<component is="dataName" ></component>

在当前的data中  给这个字段赋值 值为要展示的组件名 值类型一定是字符串类型 

在methods中可以动态改变这个值  即动态切换组件