# lg

**Repository Path**: lichunxiu/lg

## Basic Information

- **Project Name**: lg
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-21
- **Last Updated**: 2025-03-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 常用编辑器：webstorm、Visual Studio Code

#### vscode编辑器

下载地址[https://code.visualstudio.com/]

#### git可视化工具下载

安装博客[https://www.cnblogs.com/xiuxingzhe/p/9312929.html]    
下载地址[https://download.tortoisegit.org/tgit/]


#### 安装介绍

##### 1、 安装node.js——官网下载安装即可

下载地址[https://nodejs.org/en/],一路next安装即可，可以安装在任意盘。


##### 2、常用命令行

```
克隆项目 git clone http://111.198.38.145:6001/zsw/XiChangWeb

npm install //安装所有的依赖

//运行在localhost:3000 （端口号具体见nuxt配置文件中server.port）
npm run dev
```

#### 项目目录结构

```
└─XiChangWeb
  ├─.nuxt               // Nuxt自动生成，临时的用于编辑的文件，build
  ├─assets              // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中
  ├─components          // 用于自己编写的Vue组件，比如日历组件、分页组件
  ├─layouts             // 布局目录，用于组织应用的布局组件
  ├─middleware          // 用于存放中间件
  ├─node_modules
  ├─pages               // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置
  ├─plugins             // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  ├─static           // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时 候，该目录下的文件会映射至应用的根路径 / 下。
  ├─ store               // 用于组织应用的Vuex 状态管理。
  ├─.editorconfig       // 开发工具格式配置
  ├─.eslintrc.js        // ESLint的配置文件，用于检查代码格式
  ├─.gitignore          // 配置git忽略文件
  ├─nuxt.config.js      // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
  ├─package-lock.json   // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作
  ├─package.json        // npm 包管理配置文件
  ├─README.md

```



#### 创建页面并启动项目

​	在根目录pages文件夹中找到对应的文件夹创建***.vue文件，结构如下

```
<template>
  <div>
    <h1>hello nuxt.js</h1>
    //输入框绑定变量
    <el-input
      v-model="value1"
      type="input"
      placeholder="请输入内容"/>
    //普通绑定变量
    <div>{{ value1 }}</div>
  </div>
</template>

<script>
import { get, post } from '@/lib/Util' //根据需要选择引入公共函数

export default {
  name: 'Test', //页面名
  // data存放页面全局变量
  data() {
    return {
    	value1: ''， //创建变量
    	mapData: {
    	  a: ''
    	  b: [],
    	  c: {}
    	}, //json变量
    	arryData: [] //数组变量
    }
  },
  watch: {
 	//根据需要选择监听变量 
 	//例如监听： value1变量
    'value1': function(newVal, oldVal) {
        //监听处理
    },
    //监听 mapData变量中的a变量
    'mapDta.a': function(newVal, oldVal){
    	//监听处理
    }
  },
  // 画面初始化操作
  created() {
    //this.testFunction() //调用methods中的函数
  },
  // 画面挂载操作
  mounted() {
    //this.testFunction() //调用methods的函数
  },
  // 画面销毁时操作
  destroyed() {
    //离开页面时（一般使用：销毁定时器或组件）
  },
  // 函数方法写在methods中
  methods: {
  	testFunction() {
  		//自定义函数
  		// data中变量调用方法：  this.value1
  	}
  }
}
</script>
<style scoped lang="scss">
   //样式
</style>
```

启动项目：

```
npm run dev
```



#### 中间件交互用法

##### 1、 获取变量数据

###### （1）   引入接口函数

```
import { getTags } from '@/lib/GetDB'
```

###### （2）   函数中调用

```
let postData = [{ tagName: '变量名', timestamp: 时间戳 }, ...] 
//例如：postData = [{ tagName: 'test', timestamp: 0 }]
getTags(
      postData,
      data => {
        console.log(data, 'data')
      },
      error => {
        console.log(error, 'error')
      }
    )
```

##### 2、 修改数据

###### （1）   引入接口函数

```
import { setTags } from '@/lib/GetDB'
```

###### （2）   函数调用

```
var data={对应中间件变量名: 'test'}

sendTag(data)
```

 

##### 3、 发送消息

###### （1）   引入接口函数

```
import { sendMsg } from '@/lib/GetDB'
```

 

###### （2）   函数中调用

```
      let data = [
        [
          {
            a: 1,
            b: 2,
            c: 3,
            e: 4
          },
          {
            a: 1,
            b: 2,
            c: 3,
            e: 4
          }
        ],
        [
          {
            c: 1,
            d: 2
          }
        ]
      ]
      let postData = {
        'msgId': 事件号,
        'sendTo': '进程名',
        'waitReply': true, //是否等待回复
        'timeout': 5000, //超时时间
        'params': data
      }

sendMsg(
      postData,
      data => {
        console.log(data, 'data')
      },
      error => {
        console.log(error, 'error')
      }
    )
```



#### 组件用法——echarts组件为例 

###### 1、引入echarts组件

```
import hmiEcharts from '@/components/HmiEcharts'
```

###### 2、在components中注册组件

```
components: {
    hmiEcharts //组件注册
}
```

###### 3、在data中创建变量

```
data() {
  return {
	  echartsOption: {
        tooltip: {
          trigger: 'axis',
          confine: true
        },
        legend: {},
        grid: [
          {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '12%',
            containLabel: true
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 2,
            scale: true
          }
        ],
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        series: [
          {
            type: 'line',
            smooth: true,
            data: []
          }
        ]
    }
  }
}
```

###### 4、绑定变量并渲染

```
<hmi-echarts
  :grid="echartsOption.grid"
  :tooltip="echartsOption.tooltip"
  :legend="echartsOption.legend"
  :x-axis="echartsOption.xAxis"
  :data-zoom="echartsOption.dataZoom"
  :y-axis="echartsOption.yAxis"
  :series="echartsOption.series"
  :_height="'460px'"/>
```

echarts参数配置详见其官方网站：https://echarts.apache.org/examples/zh/index.html#chart-type-line

#### 其他常用组件用法

详见element官方网站： https://element.eleme.cn/#/zh-CN/component/quickstart 

#### 模拟接口（mockjs）

在 `plugins/mock.js` 建立一个 mock 的插件，就在这里模拟数据：

```
const Mock = require('mockjs')

Mock.mock(/\/user/, 'get', () => {
  return {
    'list|1-10': [{
      'id|+1': 1
    }]
  }
}
)

Mock.mock(/\/info/, 'post', data => {
  console.log(data)
  return {
    'list|1-10': [{
      'id|+1': 1,
      name: '@cname'
    }]
  }
}
)

```



#### 示例程序路径

"/page/demo/"路径下有示例程序。

#### 常见问题

##### mock不能正常获取模拟数据：

如果直接使用会报：request.upload.addEventListener is not a function错误，这是因为 mock 自己封装了一个基于 `XMLHttpRequest` 的 `MockXMLHttpRequest` 对象。

解决：

找到 `node_modules/mockjs/dist/mock.js` 第 8035 行，在这之后添加一行：

```
MockXMLHttpRequest.prototype.upload = createNativeXMLHttpRequest().upload
```

![img](https://img-blog.csdnimg.cn/20200827023626948.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNTY3Mzg1,size_16,color_FFFFFF,t_70#pic_center)