模块化开发： 创建Element控制面板
来自CloudWiki
目录
效果图
页面主要参考：Element：Container布局容器中“实例：用布局容器做控制面板”
前期准备
创建项目
参考使用Hbuilder 创建Vue应用创建项目
安装Node.js
因为安装Element包需要npm 安装工具，
而后者是Node.js自带的，所以我们首先需要安装Node.js
安装方法参见：Windows 安装Node.js
安装Element
打开Windows命令提示符窗口，
切换到项目所在目录(如我的项目叫Hello123-2：
d: cd D:\cloud\2022\Tech\element-ui\Hello123-2
执行 npm i element-ui -S
安装完成之后，会在node_modules目录下看到element-ui的包
也会在package.json中看到element-ui的有关应用：
{
"name": "default",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^2.6.5",
"element-ui": "^2.15.9",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}
}
编写代码
目录结构
以下内容参考 Element：Container布局容器中“实例：用布局容器做控制面板”的代码进行了改写，
代码基本类似，只不过应用工程化思维把他们分拆了一下。
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>default</title>
</head>
<body>
<noscript>
<strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
APP.vue
App.vue: 项目入口文件
将下述内容覆盖至app.vue原有内容。
下述内容主要分为三部分，html模板,scrpit代码， css代码，
这一个文件相当于创建了一个vue模块，并通过export default输出，以供其他文件使用。
export default作用可参考: vue中的export default
<template>
<div id="app">
<el-container style="height: 700px; border: 1px solid #eee">
<Aside></Aside>
<el-container>
<Header></Header>
<Main></Main>
<el-footer></el-footer>
</el-container>
</el-container>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Aside from './components/Aside.vue'
import Header from './components/Header.vue'
import Main from './components/Main.vue'
// const item = {
// date: '2016-05-02',
// name: '马小虎',
// address: '上海市普陀区金沙江路 1518 弄'
// };
export default {
name: 'app',
components: {
HelloWorld,
Aside,
Header,
Main
},
// data() {
// return {
// tableData: Array(20).fill(item)
// }
// }
}
</script>
<style>
</style>
Aside组件
components/Aside.vue:
<template>
<el-aside width="250px" style="background-color: #545c64;color:#FFF">
<h3>丝路通供应商数据中台</h3>
<el-menu :default-openeds="['1', '3']" default-active="2" class="el-menu-vertical-demo"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>整体行情</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>产品搜索</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>高级搜索</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="4">
<template slot="title"><i class="el-icon-setting"></i>选品调研</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="5">
<template slot="title"><i class="el-icon-setting"></i>利润对比</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
</template>
<script>
export default {
name: 'Aside',
}
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
Header组件
components/Header.vue:
<template>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
</template>
<script>
export default {
name: 'Header',
}
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
</style>
Main组件
components/Main组件:
<template>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</template>
<script>
const item = {
date: '2016-05-02',
name: '马小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
export default {
name: 'Main',
data() {
return {
tableData: Array(20).fill(item)
}
}
}
</script>
<style>
</style>
main.js
main.js: 项目的核心文件。
这里由它来创建实例，绑定页面节点。
render函数可参考：vue中的render函数
这里主要是添加了这么几行,引用了Elment UI：
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
具体代码：
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
运行项目
浏览器打 开地址localhost:8080
如果一一切正常，会看到如下画面
