一、创建一个项目文件夹，命名为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: '-05-01', value: '-05-01'}, {text: '-05-02', value: '-05-02'}, {text: '-05-03', value: '-05-03'}, {text: '-05-04', value: '-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 - 网站快速成型工具/#/zh-CN
然后我们再添加一个柱状图，具体的配置方法也可以在echarts官网中找到，这里给出echarts官网地址：Apache ECharts/zh/index.html各种常见图表配置、使用可以在示例项中找到。
三、使用json-server模拟后端数据进行前后端数据交互
3.1首先我们需要json-server框架来搭建一个后端的服务器
关于json-server的使用可以在我主页中找到相关博客，在这里就不再过多的赘述...
在搭建好服务器后，我们需要添加前端图表渲染所需的数据
其中的db.json文件如下：
{"tablist":[{"date":"-09-05","name":"张三","address":"上海市普陀区金沙江路1518弄","tag":"家"},{"date":"-05-01","name":"李四","address":"南宁市青秀区佛子岭路18号","tag":"家"},{"date":"-12-05","name":"王五","address":"桂林市七星区花江路316号","tag":"家"},{"date":"-09-25","name":"赵六","address":"玉林市博白县博白镇大街008号","tag":"家"},{"date":"-11-05","name":"刘七","address":"北京市中关村建设路001号","tag":"家"}],"imgList":[{"url":"/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"},{"url":"/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"},{"url":"/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"},{"url":"/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})}
到这我们就基本实现了我们想要的效果..
这个项目只是本人用来练习的小项目，不完整，有弊端
望大佬指正..
（完）
