wss-ui

## 技术架构 ``` vue+vue-router+vuex+axios+typescript+iview+vue-clipboard2+vue-lazyload+vue-virtual-scroller+echarts-liquidfill // vue-clipboard2复制 // vue-lazyload图片懒加载 // vue-virtual-scroller无限加载列表根据窗口大小显示列表，避免页面卡顿,注意：使用page模式的时候，如果父级有overflow:auto，就会使用这一级做参照

Usage no npm install needed!

<script type="module">
  import wssUi from 'https://cdn.skypack.dev/wss-ui';
</script>

README

wenshushu-pc

技术架构

vue+vue-router+vuex+axios+typescript+iview+vue-clipboard2+vue-lazyload+vue-virtual-scroller+echarts-liquidfill
// vue-clipboard2复制
// vue-lazyload图片懒加载
// vue-virtual-scroller无限加载列表根据窗口大小显示列表，避免页面卡顿,注意：使用page模式的时候，如果父级有overflow:auto，就会使用这一级做参照物，会造成渲染失败
// echarts-liquidfill水球进度条
// jquery-pjax实现服务端渲染的局部刷新，
// "@sentry/webpack-plugin": "^1.10.0",

"pre-commit": "lint-staged"

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.

优化记录

  • 新版chrome计算md5在分片为2m时会出现卡顿，在500kb的时候不会卡顿，暂时调整为1m计算,后续优化计算大小（complete）
  • input优化

大文件分片并发上传解决方案default: 41135.615966796875 ms

  • 使用slice对文件切片，并记住这个文件的编号和是否上传过这个片
  • 当最后一个分片上传完成的时候，就判断当前的片是否全部上传完成了，是就进行合成

vue watch和nextTick应该是微任务

css资源路径处理

// 如果是相对路径可以使用 @, 即 background: url('@/assets/images/icon.png'); // cli3默认配置了别名@指向src目录，而～表示会将后面当成模块解析。所以~@/xxx相当于require('src/xxx')

引导记录

  • 1:大文件下载预览恢复

fix

  • DynamicScroller列表做兼容性处理
  • 表单优化
  • 数据列表优化（暂时没有很好的方案）

规范

  • css命名
    1. 公用样式m-x，否则x-x
    2. 子类使用x-xx
    3. 覆盖使用ax-dx_xx,太长使用简写ad_xx
    4. 长度x-xx_xx或者x_x
    5. 布局一般采用 父级-子级 父级-子级_修改样式属性
    6. 非块级直接子级命名，