1 node.js安裝

https://nodejs.org/en/

下載好 安裝點下一步

2 vue 安裝

npm install --global vue-cli // 全域性安裝

檢視安裝成功

vue -V // 大V

3 webpack 安裝

npm install webpack -g // 全域性安裝

然後 webpack -V

提示安裝webpack-cli

安裝提示yes

然後提示你安裝npm install --save-dev webpack

4 建立vue webpack專案

vue init webpack my-project

回車

cd xxx my-project

npm run dev

一、引入Vuex

1、npm install vuex --save

2、npm i -S vuex-persistedstate

3、在src下建立store資料夾下放store.js

在store.js使用

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)
export default new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.sessionStorage
 
  })],
  state: {},
  mutations: {},
  getters: {},
  actions: {}
})

4、main.js引入

import Vuex from 'vuex'
import store from './store/store'

Vue.use(Vuex)

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

二、引入elemenetUI

1、npm i element-ui -S

2、main.js引入

import ElementUI from 'element-ui'
 
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

三、引入echarts

1、npm install echarts --save

2、main.js引入

import echarts from 'echarts/lib/echarts'
// 引入提示框元件、標題元件、工具箱元件。
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/grid'

import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
...

Vue.prototype.$echarts = echarts

3、在需要的元件寫

<div class="line" id="line" ref="line_wrap"></div>

// 要給高度
methods：

getAlarmLine () {
  const line = this.$echarts.init(this.$refs.line_wrap)
  line.setOption({
    title: {
      text: '各類報警趨勢',
      textStyle: {
        color: '#ffffff'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['警報1', '警報2', '警報3'],
      textStyle: {
        color: '#ffffff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: this.dateArr,
      axisLine: {
        lineStyle: {
          color: '#ffffff',
          width: 1
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#ffffff',
          width: 1 // 這裡是為了突出顯示加上的
        }
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '警報1',
        type: 'line',
        stack: '總量',
        smooth: true,
        data: this.alarm.falldown,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          borderWidth: 3
        }
      },
      {
        name: '警報2',
        type: 'line',
        stack: '總量',
        smooth: true,
        data: this.alarm.sos,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          borderWidth: 3
        }
      },
      {
        name: '警報3',
        type: 'line',
        stack: '總量',
        smooth: true,
        data: this.alarm.heartrate,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          borderWidth: 3
        }
      }
    ],
    color: ['#33ffcc', '#ffff33', '#d633ff']
  })
}

mounted () {
  this.getAlarmLine()
}

四、日期js

1、src下建立utils資料夾下放validate.js

export default {
  format (fmt) {
    const o = {
      'y+': this.getFullYear(), // 年
      'M+': this.getMonth() + 1, // 月份
      'd+': this.getDate(), // 日
      'h+': this.getHours(), // 小時
      'm+': this.getMinutes(), // 分
      's+': this.getSeconds(), // 秒
      'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
      'S': this.getMilliseconds() // 毫秒
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
      }
    }
    return fmt
  }
}

2、main.js引入

import validate from './utils/validate'

Vue.prototype.validate = validate

3、在元件中使用

// eslint-disable-next-line no-extend-native
Date.prototype.format = this.validate.format
const date = new Date().format('yyyyMMdd')

五、引入mqtt

1、npm i mqtt

2、src下建立mt資料夾下放index.js

import mqtt from 'mqtt'
// import store from '../store/store'
// import { Notification } from 'element-ui'

let client = null

// 開啟訂閱（登入成功後呼叫）
export const startSub = () => {
  if (client === null) {
    var options = {
      clientId: 'mqttjs01',
      username: 'aabbccddee',
      password: 'aabbccddee',
      timeout: 5,
      keepAliveInterval: 50,
      cleanSession: false,
      useSSL: false
    }
    client = mqtt.connect('wss://jky.wecare-u.net/wss/', options)
    client.on('connect', () => {
      // 訂閱訊息類通知主題
      client.subscribe('realtime')
      console.log('連線mqtt成功，並已訂閱相關主題')
    }).on('error', err => {
      console.log('連線mqtt報錯', err)
      client.end()
      client.reconnect()
    }).on('message', (topic, message) => {
      console.log('topic', topic, message.toString())
    })
  }
}

// 關閉訂閱（退出登入時呼叫）
export const closeSub = () => {
  client && client.end()
  client = null
}

export const sendSub = (topic, msg) => {
  client.publish(topic, msg)
}