elementui 展示列表模板_二、vue＋ElementUI开发后台管理模板—布局

0、写在前面

关于布局：我们常见的后台管理页面结构一般有下图中显示的三种，如果把Tabs(导航的多标签显示)、Crumbs(面包屑)、Content(页面内容)和Footer(底部)当做中间区域视为一块整体，可以看到主要的区别就是Menu(菜单栏)位置的区别，待会我们就根据这些来设立vuex(vuex官网)的布局状态值，主要考虑以下两点：

(1)菜单栏的位置；

(2)设置是否需要该模块，包括Tabs、Crumbs、Foooter。

关于功能：在后台模板中我们会用到以下几种功能：

● Menu菜单自动化

● Tabs多标签

● Crumbs面包屑导航

● vuex 的 modules

● svg 图标雪碧图 svg-sprite-loader

● 批量导入资源

● 自定义全局组件—批量全局注册

● 自定义全局方法

● 获取接口数据、模拟数据——axios＋Mockjs

行动前准备：接下来我们用 GitHub/chizijijiadami/hand-to-hand 的代码来做准备些工作。可以参见下文章 vue实践1.1 企业官网——prerender-spa-plugin预渲染 ，第2段 css预处理器stylus( stylus官网)、第5段vuex状态管理( vuex官网 )。

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

- "serve": "vue-cli-service serve --mode development",

+ "serve": "vue-cli-service serve --mode development --open",

b、安装

yarn add vuex element-ui

yarn add stylus stylus-loader -D

c、src>App.vue

-

- indexlist

-

export default {

name: 'App',

}

d、src>main.js

+ import Element from "element-ui";

+ import 'element-ui/lib/theme-chalk/index.css';

+ // 使用Element UI

+ Vue.use(Element, {

+ size: "small"

+ });

- import './assets/styles/reset.css'

- import './assets/styles/style.css'

e、src>pages>Index>index.vue

Index-index

-

export default {

name:"IndexIndex",

- created(){

- console.log(process.env.VUE_APP_BASE_API,'输出VUE_APP_BASE_API');

- }

}

-

- @import '~@/assets/styles/component.css'

-

f、删除

src>assets>images>jerry.png

src>assets>styles>component.css

src>assets>styles>reset.css

src>assets>styles>style.css

准备工作到此结束。

1、新建布局文件

src>pages>Layout>components>Header.vue

header

src>pages>Layout>components>Mune.vue

首页

列表

详情

特性

src>pages>Layout>components>Tabs.vue

label="首页"

>

src>pages>Layout>components>Crumbs.vue

首页

src>pages>Layout>components>Content.vue

src>pages>Layout>components>Footer.vue

大米工厂

src>pages>Layout>index.vue

import Header from "./components/Header";

import Tabs from "./components/Tabs";

import Menu from "./components/Menu";

import Crumbs from "./components/Crumbs";

import Content from "./components/Content";

import Footer from "./components/Footer";

export default {

components: {

Header,

Menu,

Tabs,

Crumbs,

Content,

Footer

}

};

2、修改src>router>index.js

export default new Router({

+ scrollBehavior() { //页面内容多过一屏时，需设置滚动位置

+ return { x: 0, y: 0 }

+ },

routes: [

{

path: '',

- redirect: '/index'，

+ redirect: '/index/index'

},

{

path: '/index',

- component: _import('Index/index')

+ component: _import('Layout/index'),

+ redirect: '/index/index',

+ children:[

+ {

+ path: 'index',

+ component: _import('Index/index'),

+ }

+ ]

},

{

path: '/list',

- component: _import('List/index'),

+ component: