核心知识点
关于 v-show属性的相关使用
大致效果图
其中上方文头部导航，左边为菜单选项，中间为index页面。
前提
前提需要阅读上一篇，使用Vue UI 方式创建 Hello World Vue 项目。
教程
进行组件化
新建目录如下，新建文件如下
其中分为两个文件夹，一个为views文件夹，一个为components文件夹，一个存放相关文件页面信息，一个存放相关的组件信息。
创建相关的url
创建相关的页面url 在router目录下新建相关的文件， 代码如下
{
path: '/index',
name: 'index',
component: () => import('../views/Index')
},index页面组件信息
index页面相关代码文件如下
其中把三个组件进行相关的注册，注册到页面中。这三个组件分别为BoxHeader，BoxIndex，Menum文件，对这三个文件进行相关的注册。
头部文件
进入头部文件，这里对头部文件进行代码，书写，代码如下
退出
菜单文件
菜单文件代码如下。并添加相关的事件绑定，确保能够菜单伸缩。
保险产品管理保险产品查询用户管理封号管理问答管理问题管理回答管理数据统计保险产品数据保险公司数据上方使用的是Element Ui 框架实现
主页文件
这里主页文件为几个简单的主页文件。一个为示例，一个为主页，代码分别如下
查看新增删除王小虎
{{ msg }}
For a guide and recipes on how to configure / customize this project,
check out thevue-cli documentation.
Installed CLI Plugins
babelroutervuexeslint
Essential Links
Core DocsForumCommunity ChatTwitterNews
Ecosystem
vue-routervuexvue-devtoolsvue-loaderawesome-vue
进行事件绑定
这里由于跨两个组件，所以进行事件绑定，当子组件触发事件以后，先调用子组件的方法，再通过相关参数，调用父组件的方法，通过调用父组件的方法，实现更改父组件页面的值。
具体流程如下
父组件创建相关方法，并绑定事件
创建相关方法
methods: {
changeData(){
console.log(444444);
this.cur = 1;
}
}绑定相关事件
子组件创建相关方法并调用
ming(){
console.log("3333");
this.$emit("callFather");
}子组件创建相关方法并完成方法绑定
保险产品查询子组件全部代码如下
保险产品管理保险产品查询用户管理封号管理问答管理问题管理回答管理数据统计保险产品数据保险公司数据父组件全部代码如下
完成效果图
前
后
