简易室内灯光控制模拟系统（vue+element+echarts纯前端实现）

写在前面

本项目是一个极简易的模拟灯光控制系统，使用vue+element+echarts ，是我同学设计并让我做的两套网页（丑和我无关【狗头】）。此网页为是一个纯前端页面，甚至没有axios，但在页面中数据没有真在代码完全写死，而是在页面created时指定了假数据，模拟axios请求发送回来对数据的赋值。
代码十分简易，总开发时间不到5小时，因为有大半年没有写过vue了，所以做个笔记给自己看。

第一套界面截图

在这里插入图片描述

源码地址

https://gitee.com/wang-yongyan188/lcms.git 注意在master分支

第二套

在这里插入图片描述

源码地址

https://gitee.com/wang-yongyan188/lcms.git 注意在demo2分支

笔记

项目环境搭建

创建vue项目 vue create 项目名称

在创建时选择自定义方式创建比较好

如果已经选上了，想要关闭可以在项目的 vue.config.js 文件下加入以下一段代码
```
module.exports = {
        
        
  lintOnSave: false
}
```

删除没用components和view中的页面以及App.vue中无用的组件和路由配置

路由配置 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
 
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

App.vue

	<template>
		 <div id="app">
		   <router-view/>
		 </div>
	</template>

引入的页面默认含有内边距在后期指定全局大小时和不方便，在App.vue中引入样式去掉
```
  ```java
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  ```
```

组件库 Element-ui 本地安装：npm i element-ui -S

在main.js中引入以下代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, {
          
           size: "small" }); //指定全局el组件大小
Vue.use(ElementUI) // 也可不指定

在页面随意使用一个标签测试如在App.vue中 <el-button>按钮</el-button> ,然后通过浏览器访问测试成功即可

图表库 echarts 本地安装: npm install echarts -S
- 在需要用到的页面的<script>中引用 import * as echarts from 'echarts'
- 然后在页面中创建一个盒子,设置id 用来指定图表显示的位置，注意：盒子一定要指定大小！,否则不会显示
- 访问官方示例，挑中一个用来显示 https://echarts.apache.org/examples/zh/index.html
- 要在vue的mounted中，渲染图表。注意 mounted在created后调用，最好将渲染的图表封装成一个函数，在mounted中调用函数
  例：

	mounted(){
      
      
      let option = {
      
      
            xAxis: {
      
      
                type: 'category',
                boundaryGap: false,
                data: []
            },
             tooltip: {
      
      
             trigger: 'axis'
            },
            legend: {
      
      
                data: [ '预定值']
            },
            yAxis: {
      
      
                type: 'value',
                scale : true,
                max : 1600,
                min : 700,
                splitNumber : 10,
            },
            series: [
                {
      
      
                name: '实际值',
                data: [],
                type: 'line',
                areaStyle: {
      
      }},
                {
      
      
                name: '预定值',
                type: 'line',
                stack: 'Total',
                data: []
                },
            ]
        };
        let chartDom = document.getElementById('chart');
        let myChart = echarts.init(chartDom);
        option.xAxis.data=this.x;
        option.series[0].data=this.y;
        option.series[1].data=this.standard;
        myChart.setOption(option);
  },

图示

在这里插入图片描述

页面布局

App.vue为所有vue页面显示的位置，而App.vue是挂载到index.html中的，main.js相当于index.js
在这里插入图片描述
vue的页面与react对比

功能骨架

即：
在这里插入图片描述
创建一个专用于骨架的vue页面，整个页面作为一级路由整个页面显示，然后骨架页面中播放二级路由页面
相比于Antd，Element在布局上要简单很多

在这里插入图片描述

登录页面

登录最复杂的地方在于css样式，如登录盒子居中，标题居中，按钮居中、输入框居中、登录背景等。
**登录页要确保全屏 ** 所以大盒子要 height: 100vh;width:100wh;

背景
- 使用渐变色背景 background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);overflow: hidden;
- 使用图片背景 background-image: url('../assets/backImg.jpg') ; overflow: hidden;
登录框
- 居中：采用子绝父相的定位，在大盒子加入 position: relative;在登录盒子加入 position: absolute; 然后移动使其居中left: 50%;top: 50%; transform: translate(-50%, -70%);
- 美化：设置透明度让效果直线上升width:500px; height: 300px; opacity:0.9;

动态图表

动态图表即类似于通过点击按钮就可以直接将图表发生变化，整体思路是将渲染图表的代码进行封装，然后初次在mounted中调用。因为图表的变化必定是因为某一个值的改变，这个值通过vue的watch监听，即在数据发生变化后，监听到后在调用渲染图表的函数即可。
在这里插入图片描述

部署

前端项目开发完，怎样让其成为一个可移动的运行包呢？思路：将项目打包后，在使用运行环境将其包裹，代码+运行环境作为一个整包就可以在任何电脑间移动，即使有的没有前端环境也可以，因为包装盒就是环境

使用npm run build打成一个单页面的dist包，然后下载一个nginx作为一个web服务器
找出nginx的配置文件/conf/nginx.conf,修改其端口号和项目的存放位置
然后在nginx的根目录下的命令行输入start nginx.exe，通过访问nginx中的配置端口即可访问
为什么nginx可以改变项目的原本项目端口？ 因为项目本身是一个代码，并不能够独立运行的，在开发环境中是Node作为服务器，使用的是Node的端口，将代码移出，放入nginx，使用的是nginx作为服务器，因此也要使用它的端口

其他

强制使其在一行可以使用element的栅格布局

<el-row :gutter="24"> 
	<el-col :span="12"><div></div></el-col>
	 <el-col :span="12"><div></div></el-col>
</el-row>

获取当前时间的函数

 getCurrentTime() {
    
    
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth()+1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
        let nowTime= yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
        return nowTime;
        },

Element 标签的一些属性需要使用:绑定，例 :disabled='true'
路由的配置例：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    
    
    path: '/login',
    name: 'myLogin',
    component: () => import('../views/myLogin.vue')
  },{
    
    
    path: '/',
    name: 'myHome',
    component: () => import('../views/home/home.vue'),
    children: [
      {
    
    
        path: '/homePage',
        name: 'homePage',
        component: () => import('../views/home/homePage.vue')
      },
      {
    
    
        path: '/light',
        name: 'lightController',
        component: () => import('../views/home/lightController.vue')
      }
    ]
  }
]

const router = new VueRouter({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

路由可以指定 children指定二级路由，children中还可以指定children形成三级路由…