物联网设备数据流转之搭建前端服务框架：Vue3.0, ElementPlus, Axios, Echarts

背景

有了后端服务接口，我们就要开始前端项目搭建啦，终于可以看到展示物联网设备数据的页面了。这篇文章搭建基于最新版 Vue 3.2.13 、 ElementPlus 2.1.9 的极简前端脚手架，方便后续快速验证想法以及项目实施。

涉及到的技术及组件有： Vue 3.2.13 , ElementPlus 2.1.9 , axios 0.26.1 , vue-router 4.0.3 , Echarts 5.3.2 。

Note:

前提需要有 Node.js 环境，可使用 nvm 进行 Node.js 的多版本管理。npm install 默认会在依赖安装完成后将其写入package.json，因此安装依赖的命令都未附加save参数。

$ node -v
v12.22.6

安装vue-cli并创建项目

npm install -g @vue/cli
vue --version
vue create iot-data-flow-frontend

vue create iot-data-flow-frontend 创建项目时，我选择了 vue-router ，刚开始的 package.json 依赖是这样：

  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },

运行项目

通过以下命令运行前端项目，然后通过 http://localhost:8080/ 来访问启动的前端项目。

npm run serve

由于我前面选择了 vue-router ，在访问到首页后，可以看到默认有两个路由：Home与About。

集成ElementPlus 安装依赖

npm install element-plus

此时， package.json 的依赖变为：

  "dependencies": {
    "core-js": "^3.8.3",
    "element-plus": "^2.1.9",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },

配置，修改main.js中的内容：

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'

// createApp(App).use(router).mount('#app')
const app = createApp(App);

// 集成ElementPlus
import ElementPlus from 'element-plus';
// import 'element-plus/dist/index.css' // 官方推荐
import 'element-plus/theme-chalk/index.css';

app.use(ElementPlus);
app.use(router).mount("#app");

使用element-ui

作为演示，我们在 views 目录下新建一个 ElementUIDemo.vue 页面，添加以下内容，用以测试 ElementPlus 是否集成成功。

ElementUIDemo.vue

要从前端页面访问到我们新增的页面，还需要添加 router 路由：先引入 ElementUIDemo ，然后添加至路由表。

router/index.js

import {
    createRouter,
    createWebHistory
} from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ElementUIDemo from '../views/ElementUIDemo.vue'

const routes = [{
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import( /* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
    {
        path: '/element',
        name: 'ElementUIDemo',
        component: ElementUIDemo
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

最后是在前端页面上添加入口链接。

App.vue

<template>
    <nav>
        <router-link to="/">Homerouter-link> |
        <router-link to="/about">Aboutrouter-link> |
        <router-link to="/element">Elementrouter-link>
    nav>
    <router-view />
template>

使用效果

参考 ElementPlus 官方文档：https://element-plus.gitee.io/zh-CN/component/button.html

集成Axios 安装依赖

npm install axios

此时， package.json 的依赖变为：

  "dependencies": {
    "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "element-plus": "^2.1.9",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },

按需引入

在需要使用 axios 的组件中引入 import axios from "axios";

使用axios

使用效果

参考 axios 源码及文档地址：https://github.com/axios/axios

集成Echarts 安装依赖

npm install echarts

此时， package.json 的依赖变为：

  "dependencies": {
    "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "echarts": "^5.3.2",
    "element-plus": "^2.1.9",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },

使用Echarts

使用效果

参考Echarts官网：https://echarts.apache.org/zh/index.html

可能遇到的问题 vue-router新增页面步骤： 首先，在 views 目录下新建一个 *.vue 页面；然后，要从前端页面访问到我们新增的页面，还需要添加router路由（/router/index.js）：先引入组件名称，然后添加至路由表；最后，是在前端页面（APP.vue）上添加入口链接。 eslint默认规则导致不必要的报错

如果开启了 eslint ，新增 Component 时，报错:

The “EchartsDemo” component has been registered but not used vue/no-unused-components

解决方法：在 package.json 或 .eslintrc.js 的eslintConfig下添加：

    "rules": {
      "vue/no-unused-components": "off", // 当存在定义而未使用的组件时，关闭报错
      "no-unused-vars":"off" // 当存在定义而未使用的变量时，关闭报错
    }

开发环境跨域

方法一：在前端进行配置，新建 vue.config.js 文件，内容如下：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8000/',
                changeOrigin: true,
                ws: true,
                secure: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

方法二：因为后端服务是我们自己开发的，所以可以在后端进行CORS配置

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").
                        allowedOriginPatterns("*").
                        allowedMethods("*").
                        allowedHeaders("*").
                        allowCredentials(true).
                        exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L);
            }
        };
    }
}

Reference Vue3.0ElementPlus

---

If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!