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

一、创建一个项目文件夹，命名为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样式属性加入进来。

需要注意的是：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图表

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

清除日期过滤器
    清除所有过滤器
    
      
      
      
      
      
      
      
        
      
    

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.data
        this.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
      })
    }

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

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

望大佬指正..

（完）