一、创建一个项目文件夹，命名为my-demo

1.1进入项目文件夹路径，用命令行打开，输入以下命令行：

vue init webpack my-ele-demo

等待一段时间后，再根据个人需求完成基础项目配置即可完成项目的创建。

1.2完成后在编辑器中打开项目，然后在终端中执行命令：

npm run dev

即可打开在网页中打开项目，当出现一下页面时，就代表我们的项目已经可以跑起来了...

对于第一次接触vue项目的同学，我们需要了解到的是一些文件信息，我为大家做了一些解释，有过项目经验的自行跳过：

build/ #webpack编译任务配置文件：开发环境与生产环境
config/index.js/ #项目核心配置
node_module/ #项目中安装的依赖模块
src/main.js #程序入口文件
src/App.vue #程序入口vue组件
src/components/ #各种组件
src/assets/ #资源文件夹，一般放一些静态资源文件
src/router/ #路由文件
static/ #纯静态资源（直接拷贝到dist/static/中）
test/unit/ #单元测试
test/unit/specs/ #测试规范
test/unit/index/ #测试入口文件
test/unit/karma.conf.js #测试运行配置文件
test/e2e/ #端到端测试
test/e2e/specs/ #测试规范

二、引入ElementUI外部UI框架进行项目的进一步实现

推荐通过一下命令行指令进行ElementUI的下载安装

npm i element-ui -S

然后需要进入src/main.js文件，通过一下代码进行导入和使用

//导入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'//使用
Vue.use(ElementUI)

这样就可以将elementui框架引入到我们的项目当中。

2.1 我们接着在components文件夹中创建四个vue组件，分别命名：

其中

Application代表应用管理组件模块
Config代表配置管理组件模块
Home代表首页组件模块
index代表入口组件模块

2.2 index.vue组件基础构建

首先我们需要在elementui官网中找到项目所需的Container 布局容器，然后将其放入div中，这里需要注意的是在我们加入组件时，不要忘记需要将它的CSS样式属性加入进来。

<template><div><el-container><el-aside width="200px"><el-menu routerdefault-active="2"class="el-menu-vertical-demo">
<!--            导航一--><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-submenu>
<!--            导航二--><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">应用管理</span></el-menu-item>
<!--            导航三--><el-menu-item index="3"><i class="el-icon-document"></i><span slot="title">配置管理</span></el-menu-item>
<!--            导航四--><el-submenu index="4"><template slot="title"><i class="el-icon-location"></i><span>导航四</span></template><el-menu-item index="4-1">选项1</el-menu-item><el-menu-item index="4-2">选项2</el-menu-item></el-submenu></el-menu></el-aside><el-container><el-header>Header</el-header><el-main><router-view></router-view></el-main></el-container></el-container></div>
</template>

需要注意的是：el-main中需要使用router-view，后续的视图展现将会使用到。

2.3 在App.vue中将index.vue导入并注册使用

首先我们就需要将默认的router-view注释掉，然后导入index组件，注册后在div中加入使用。

然后我们在终端通过命令启动程序，将会出现一下界面：

2.4 配置router/index.js文件

首先我们需要通过import将各种组件引入并注册：

import application from "../components/Application";
import config from "../components/Config";
import home from "../components/Home";

然后配置路由规则：

routes: [{path: '/',component: home},{path:'/index',component:home},{path:'/application',component:application},{path:'/config',component:config}]

接着我们需要修改一下index.vue文件中的不同导航块的index，将index中的数值修改为路由中的相应路径：

如导航一中的选项1的index修改为 /index

导航二的index修改为 /application

导肮三的index修改为 /config

修改完成后我们可以发现，项目中的导航可以进行正常的路由跳转。

三、引入echarts开源可视化图表库进行项目的进一步实现

3.1 首先我们需要在项目中下载echarts包，通过以下命令行可以实现：

npm install echarts --save

等待下载完成后，我们需要在main.js中引入

import * as echarts from 'echarts'

然后需要配置原型：

Vue.prototype.$echarts = echarts;

这样我们就可以在各个组件中使用echarts图表工具

3.2 在Home.vue中使用echarts图表

首先我们添加一个基础表格：

<el-button @click="resetDateFilter">清除日期过滤器</el-button><el-button @click="clearFilter">清除所有过滤器</el-button><el-tableref="filterTable":data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"sortablewidth="180"column-key="date":filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]":filter-method="filterHandler"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址":formatter="formatter"></el-table-column><el-table-columnprop="tag"label="标签"width="100":filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]":filter-method="filterTag"filter-placement="bottom-end"><template slot-scope="scope"><el-tag:type="scope.row.tag === '家' ? 'primary' : 'success'"disable-transitions>{{scope.row.tag}}</el-tag></template></el-table-column></el-table>

data数据、生命周期、以及方法在elementui官网可以简单获取，在这里我不做赘述

Element - 网站快速成型工具https://element.eleme.cn/#/zh-CN

然后我们再添加一个柱状图，具体的配置方法也可以在echarts官网中找到，这里给出echarts官网地址：Apache EChartshttps://echarts.apache.org/zh/index.html各种常见图表配置、使用可以在示例项中找到。

三、使用json-server模拟后端数据进行前后端数据交互

3.1首先我们需要json-server框架来搭建一个后端的服务器

关于json-server的使用可以在我主页中找到相关博客，在这里就不再过多的赘述...

在搭建好服务器后，我们需要添加前端图表渲染所需的数据

其中的db.json文件如下：

{"tablist":[{"date":"2019-09-05","name":"张三","address":"上海市普陀区金沙江路1518弄","tag":"家"},{"date":"2022-05-01","name":"李四","address":"南宁市青秀区佛子岭路18号","tag":"家"},{"date":"2008-12-05","name":"王五","address":"桂林市七星区花江路316号","tag":"家"},{"date":"2016-09-25","name":"赵六","address":"玉林市博白县博白镇大街008号","tag":"家"},{"date":"2010-11-05","name":"刘七","address":"北京市中关村建设路001号","tag":"家"}],"imgList":[{"url":"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"},{"url":"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"},{"url":"https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"},{"url":"https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"}]
}

3.2 在项目中配置axios包

首先我们需要打开项目终端，输入以下命令行将axios配置到我们的项目中

npm install axios --save

等待下载完成后，可以选择打开main.js文件修改配置，让项目全局都能够使用axios

因为这只是一个用于练习的小项目，我只在个别页面使用了axios

只需要在页面中使用import导入即可使用...

import axios from 'axios'

3.3 Home组件和Application组建的数据处理

为Home.vue添加data

data() {return {dataList:[],tableData: []}}

其中dataList是表格数据 tableData是日期筛选功能所需的日期数据

为Home.vue添加获取数据的方法getData()

getData(){axios.get('http://localhost:3000/tablist').then(res=>{this.tableData = res.datathis.tableData.forEach(item=>{this.dataList.push({text:item.date,value:item.date})})},error=>{console.log(error)})}

为Application.vue添加data

  data() {return {urls: []}}

为Application.vue添加获取数据的方法getData()

getData(){axios.get('http://localhost:3000/imgList').then(res=>{console.log(res)this.urls = res.data})}

到这我们就基本实现了我们想要的效果..

这个项目只是本人用来练习的小项目，不完整，有弊端

望大佬指正..

（完）

前端实战项目：vue+elementUI管理平台相关推荐

[项目]Vue+ElementUi疫情监测平台纯前端项目(一)添加数据
疫情防控平台搭建项目展示先把git贴上吧喜欢的可以拉下来研究研究 https://gitee.com/shang_dynasty/yiqing.git 一个登录框没什么好说的分页体温处于& ...
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目源码(欢迎star): 前端项目代码后端项目代码系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
ssm毕设项目校外实习管理平台6tu82（java+VUE+Mybatis+Maven+Mysql+sprnig）
ssm毕设项目校外实习管理平台6tu82(java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HB ...
2018最新vue.js实战项目：美团外卖平台
vue.js实战项目:美团外卖平台第1章课程简介 1-1 课程简介 1-2 课程安排第2章 Vue.js介绍 2-1 Vuejs介绍-近年来前端开发趋势 2-2 Vuejs介绍-MVVM框架 2 ...
Java毕设项目中小学教务管理平台计算机（附源码+系统+数据库+LW）
Java毕设项目中小学教务管理平台计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ E ...
开源项目 ——API接口管理平台数据库原型设计（三）
开源项目 --API接口管理平台数据库原型设计(三) 背景日常我们开发人员在开发一些常用的平台时都会用到各种各样的接口,而对于这些接口的有效管理都会成为我们的一些麻烦事,一些常见的接口管理平台我们使 ...
Golang实战项目-B2C电商平台项目(8)
Golang实战项目-B2C电商平台项目(8) 商品描述新增商品描述表(tb_item_desc)和商品表(tb_item)具有主外键关系,商品的主键也是商品描述的主键,使用工具函数生成的主键也当作 ...
Vue实战狗尾草博客管理平台第四章
本章主要内容如下: 填补上期的坑. iconfont仓库的关联,引入. 开发登录页面填坑上期中我们功能都已正常使用.但不知道有没有小伙伴测试过error页面,当访问地址不存在时,路由是否能正常挑战 ...
前端技术：Vue+elementUI 饿了吗UI+CRUD，创建图书管理系统
1.Vue框架 JavaScript升级版,JS它脚本语言,Vue框架语言它my生命,api工具类文章中心思想,有生命力 Vue框架思想,MVVM框架思想,数据驱动思想,组件化思想 2.j2ee框 ...
【2023最新】32个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，你想要的全都有，建议码住！
1.[网易云音乐首页制作] 2.[实战项目之今日头条] 3.[实战项目之拉勾网] 4.[ReactNative项目之美食APP] 5.[uni-APP项目实战教程] 6.[React项目管理后台系统] ...

前端实战项目：vue+elementUI管理平台