vue项目创建

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: '',
      username: '',
      password: '',
      timeout: 5,
      keepAliveInterval: 50,
      cleanSession: false,
      useSSL: false
    }
    client = mqtt.connect('url', 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)
}

六、引入axios 

1、npm install axios

2、在uyils下建request.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
// import store from '../store/store'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

service.axios = axios

// request拦截器
service.interceptors.request.use(config => {
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
  /**
  * code为非20000是抛错 可结合自己业务进行修改
  */
    axios.timeout = 5000
    const res = response.data
    // console.log(res)
    if (res.code !== 200) {
      Message({
        message: res.msg,
        type: 'error',
        duration: 5 * 1000
      })

      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // store.commit('set_water_mark', true)
          // store.dispatch('mapalarm/update_alarm_data', [])
          location.href = '/'
          // store.dispatch('FedLogOut').then(() => {
          //   location.href = '/'
          //   location.reload()// 为了重新实例化vue-router对象 避免bug
          // })
        })
      }
      return Promise.reject(new Error('error'))
    } else {
      return response.data
    }
  },
  error => {
    console.log(error)
    if (error.response.code === 600) {
      Message({
        message: '账号无此操作权限！',
        type: 'error',
        duration: 3 * 1000
      })
    }
    Message({
      message: error.response.data.msg,
      type: 'error',
      duration: 3 * 1000
    })
    if (error.response.data.code === 20004) {
      // location.href = '/'
      MessageBox.confirm('你已被登出,请重新登录', '确定登出', {
        confirmButtonText: '重新登录',
        type: 'warning'
      }).then(() => {
        // location.href = '/'
      })
    } else {
    }
    return Promise.reject(error)
  }
)

export default service

3、在src下创建api文件夹放index.js

import request from '@/utils/request'

export function login (name, password) {
  return request({
    url: '/login',
    method: 'post',
    data: {
      name,
      password
    }
  })
}