前端web项目

vscode仓库的添加

若已经有仓库的可能要把已存在的.git文件删除，重新git init

同时若是第一次添加到远程仓库要
git push -u origin login(分支名)
第一次多为master的分支名
记录git使用

svg-icon

vue中封装svg-icon组件并使用
vue-cli3 中使用 svg-sprite-loader 来加载svg 图标一直出不来

清除页面定时器

小程序离开页面关闭定时器

Elementui的按需和全局引入

vue Cli 按需引入Element UI 和全局引用Element UI

项目总报错-eslint

vue-cli建立项目，总是存在eslint-loader的错误？？？

Vue父子组件传值

vue组件之间相互传值的方式

Echarts组件封装

可参考，具体我还没实现
在vue项目中封装echarts的正确姿势

总结两种方法

• 自己封装echarts(可能有现成的已经封装好的，我还没找到）
  封装方法参考：
  vue中关于echarts父子组件传值一个组件绘制多个图表问题
  vue中父组件向子组件echarts传值问题

具体代码：

barchart:（子组件）

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize' // 实现自适应大小

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '300px',
    },
    barData: {
      type: Object,
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  // 这里实现监听barData，一旦变化，重新绘制图
  watch: {
    barData: {
      deep: true,
      handler(val) {
        console.log(val)
        this.setOptions(val)
      }
    }
  },
  mounted() {
    console.log("barData:",this.barData)
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions({ xdata, arrdata } = {}) {  
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: xdata,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            // 设置纵坐标间隔至少为1
            minInterval: 1,
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            itemStyle: {
              normal: {
                // 设置每个柱线不同的颜色
                color: function(params) {
                  var colorList = ['#2DC1C3','#5CC0E3']
                  return colorList[params.dataIndex]
                }
              }
            },
            stack: 'vistors',
            barWidth: '60%',
            data: arrdata,
            animationDuration,
          },
        ],
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.barData)  
    },
  },
}
</script>

resize.js:

import { debounce } from '@/utils'

export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    this.$_resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },
  beforeDestroy() {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  // to fixed bug when cached by keep-alive
  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
  activated() {
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },
  deactivated() {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_initResizeEvent() {
      window.addEventListener('resize', this.$_resizeHandler)
    },
    $_destroyResizeEvent() {
      window.removeEventListener('resize', this.$_resizeHandler)
    },
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    $_initSidebarResizeEvent() {
      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    $_destroySidebarResizeEvent() {
      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    }
  }
}

signResult: （父组件）

template:

<div class="chart-wrapper">
 <bar-chart v-if="flag" :barData="histogramData" />
</div>

script:

<script>
import BarChart from './components/BarChart'
export default {
  name: 'home',
  components: {
    BarChart,
  },
  data() {
    return {
      flag: false,
      histogramData: {
        xdata: ['已签到', '未签到'],
        arrdata: [1, 2],
      },

      signnum: null,
      unsignnum: null,
      totalnum: 0,

      signlist: [],
      unsignlist: [],
    }
  },
  created() {
    this.lid = this.$route.query.lid
    this.tid = window.sessionStorage.getItem('tid')
    this.actId = window.sessionStorage.getItem('actId')
    this.getSignList()
    this.getUnsignList()
  },
  methods: {
    async getSignList() {
      const { data: res } = await this.$http.get('rec/resultTeacher', {
        params: {
          lid: this.lid,
        },
      })
      console.log('signlist', res)
      if (res.code == 200) {
        this.signlist = res.data[2]
        this.signnum = res.data[2].length
        this.totalnum += this.signnum
      }
    },

    async getUnsignList() {
      const { data: res } = await this.$http.get('rec/noSignInTea', {
        params: {
          lid: this.lid,
        },
      })
      console.log('unsignlist', res)
      if (res.code == 200) {
        this.unsignlist = res.data[2]
        this.unsignnum = res.data[2].length
        this.totalnum += this.unsignnum
        
        this.histogramData.arrdata = [this.signnum, this.unsignnum]
        // 收到了数据，开始渲染，其实也可以不要flag，因为已经实现了监听数据变化
        this.flag = true
        console.log(this.pieData)
      }
    },
 }
</script>

这种方法挺方便的，也可以自己更改echarts的样式，同样可以实时更新数据，推荐此法

• 使用v-charts：
  这是封装好，可直接使用的，也可以实时更新数据，但是就不可以自己改某些样式，只能根据它提供的方法修改一定的样式、

  具体使用可参考官方文档
  v-charts

export

谈谈组件的export和import

如果是这么import

import { NavbarNobread, Sidebar, AppMain } from './components'

那么在components里面需要export这些

export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
export { default as NavbarNobread } from './NavbarNobread'

components的目录结构如下：
其中的index.js就是以上的export代码

如果是这么import

import PieChart from './components/PieChart'

就不需要像上面一样export了，因为已经找到了该组件

地图

echarts-map-demo

Element

Element-ui带边框的表格线无法对齐怎么办？

文件上传

element-ui框架upload组件上传图片、删除图片、预览功能

二维码

利用vue来制作二维码的3种办法
在VUE中使用QRCode.js

session

Vue：SessionStorage存储-读取字符串和对象

获取屏幕尺寸

data() {
  return {
    screenWidth: document.body.clientWidth, // 屏幕尺寸
  }
},
// 钩子函数
mounted () {
 const that = this
  window.onresize = () => {
    return (() => {
      window.screenWidth = document.body.clientWidth
      that.screenWidth = window.screenWidth
    })()
  }
}