入职后第一个项目总结

2020.11.22 小白跳槽入职前端开发两月问题汇总

入职两个月来用的好用插件

1.查看图片（缩小放大旋转）Viewer

https://github.com/fengyuanchen/viewerjs

2.图片懒加载 VueLazyload

https://www.npmjs.com/package/vue-lazyload

3.列表自由拖拽插件 Sortable

http://www.sortablejs.com/

项目中遇到的问题

1.一些引入文件，eslint报错？
解决方法： 根文件夹创建 .eslintignore => 直接写需要忽略的文件夹名通常设置 为

build/*.js
src/assets/*.js
public
src/static

2. 怎么配置项目初始化配置文件？
**解决方法：**根目录创建.prettierrc.json=>

{
    "semi": false,
    "singleQuote": true
}

3.Vuex 页面刷新数据丢失

state:{
    userType: '' || window.sessionStorage.getItem('userType')
    }

注意： window.sessionStorage 中不能储存{obj} 如需储存使用 JSON…stringify()在使用 JSON.parse() 解析

4.el-form-item label 文字对齐方法

 <label slot="label" v-html="a">  </label>
 // data中定义a

5.el-table 绑定sortablejs 事件的时候需要 row-key=“id”
6. 使用相同组件渲染页面时考虑组件是否通过id获取某一标签，可能会产生一个标签渲染多次
7. 进行深拷贝需要 lodash
8. v-if 真条件渲染 v-show 可能造成网页加载缓慢
9. 前端分页

  pagehandle() {
      for (let i = 0; i < Math.ceil(this.deviceSeriallength / 25); i++) {
        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
        this.devlisttotalpage[i] = this.deviceSeriallist.slice(25 * i, 25 * (i + 1))
      }
      // 获取到数据后显示第一页内容
      if (Math.ceil(this.deviceSeriallength / 25) === 0) {
        this.devlistpagearr = []
      } else {
        if (this.windowconfignum === 0) {
          this.devlistpagearr = this.devlisttotalpage[this.currentPage1 - 1];
        }
      }

10. v-if 渲染的组件 获得焦点需要

  this.$nextTick(() => {
          this.$refs.window2input.focus()
        })

11.axios 0.20.0 delete 提交时 返回 415 媒体类型错误 建议换回 0.19.0
12.el-checkBox 中需要超出部分变成省略号 需要使用过滤器

 filters: {
    ellipsis(value) {
      if (value.length >= 10) {
        return value.substr(0, 9) + "...";
      } else {
        return value;
      }
    }
  }

总结

项目很多很low得bug 且开发得很不遵循高内聚低耦合得设计原则