2、 vue+ElementUI开发的后台管理模板-vuex状态管理和布局

（获取本节的完整代码）

0.写在前面

关于布局：我们常见的后台管理页面结构通常有三种类型，如下图所示。如果将Tabs（导航的多标签显示）、Crumbs（面包屑）、Content（页面内容）和Footer（底部）视为中间区域的一个整体，我们可以看到主要的区别是Menu（菜单栏）的位置不同。我们将根据这些设置vuex（）的布局状态值，主要考虑以下两点：

（1） 菜单栏的位置；

（2） 设置是否需要模块，包括Tabs、Crumbs和Fooater。

关于函数：我们将在后台模板中使用以下函数：

● 菜单自动化

● 选项卡多标签

● 面包屑导航

● vuex模块

● SVG图标精灵

● 批量导入资源

● 定制全局组件-批量全局注册

● 自定义全局方法

● 采集接口数据和模拟数据轴+Mockjs

● 权限控制精确到按钮级别

行动前的准备：接下来，我们使用代码做一些准备工作。请参阅以下文章，第2节：css预处理器手写笔（），第5节：vuex状态管理（）。

a、 运行src>package.json后自动打开浏览器

-“服务”：“vue-cli服务服务——模式开发”，

+“服务”：“vue-cli服务服务——模式开发——开放”，

b、 安装

纱线添加vuex元素ui

纱线添加触针触针加载器-D

c、 src>App.vue

<模板>

<脚本>

导出默认值{

name:'app'，

}

d、 src>main.js

+从“元素ui”导入元素；

+import'元素ui/lib/theme粉笔/index.css'；

+//使用元素UI

+Vue。使用（元素{

+尺寸：“小”

+ });

-导入“./assets/styles/reset.css”

-导入“./assets/styles/style.css”

e、 src>页面>索引>索引.vue

<模板>

<脚本>

导出默认值{

名称：“IndexIndex”，

-创建（）{

-控制台。日志（process.env.VUE_APP_BASE_API，'输出VUE_APP_BASE_API'）；

- }

}

-<样式>

-@import“~@/assets/styles/component.css”

-

f、 删除

src>assets>images>jerry.png

src>资产>样式>组件.css

src>资产>样式>重置.css

src>资产>样式>样式.css

筹备工作到此结束。

1.新建布局文件

src>pages>Layout>components>Header.vue

<模板>

src>页面>布局>组件>Mune.vue

<模板>