Element UI＋Vue 管理系统首页

核心知识点

关于 v-show属性的相关使用

大致效果图

其中上方文头部导航，左边为菜单选项，中间为index页面。

前提

前提需要阅读上一篇，使用Vue UI 方式创建 Hello World Vue 项目。

教程

进行组件化

新建目录如下，新建文件如下其中分为两个文件夹，一个为views文件夹，一个为components文件夹，一个存放相关文件页面信息，一个存放相关的组件信息。

创建相关的url

创建相关的页面url在router目录下新建相关的文件，代码如下

index页面组件信息

index页面相关代码文件如下

其中把三个组件进行相关的注册，注册到页面中。这三个组件分别为BoxHeader，BoxIndex，Menum文件，对这三个文件进行相关的注册。

头部文件

进入头部文件，这里对头部文件进行代码，书写，代码如下

菜单文件

菜单文件代码如下。并添加相关的事件绑定，确保能够菜单伸缩。

上方使用的是Element Ui 框架实现

主页文件

这里主页文件为几个简单的主页文件。一个为示例，一个为主页，代码分别如下

进行事件绑定

这里由于跨两个组件，所以进行事件绑定，当子组件触发事件以后，先调用子组件的方法，再通过相关参数，调用父组件的方法，通过调用父组件的方法，实现更改父组件页面的值。

具体流程如下

父组件创建相关方法，并绑定事件

创建相关方法

绑定相关事件

子组件创建相关方法并调用

子组件创建相关方法并完成方法绑定

子组件全部代码如下

父组件全部代码如下

完成效果图

前

后

小明菜市场