一、创建一个项目文件夹，命名为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 router
            default-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-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="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-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter">
      </el-table-column>
      <el-table-column
        prop="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.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
      })
    }

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

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

望大佬指正..

（完）

# vue.js # 前端 # javascript # json # html
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue