whjway / learn-vue3

h5-collections

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

开发手册

1. 使用unplugin-vue-components及unplugin-auto-import,可以不局部引用vant/vue/vue-router/vuex等模块
2. webpack配置，全局引入scss变量和混合
3. axios引入
   • 通用request配置
   • 添加config控制变量的ts兼容

问题汇总

1. 全局引入css，避免每个组件引入scss变量 sass-loader 版本10+

2. 生产环境移除log terser-webpack-plugin 版本4+

3. 按需引入vant3

4. components.d.ts使用按需加载unplugin-vue-components 时自动生成，添加到tsconfig及git忽略

5. setup获取全局变量$toast,使用时每次都需引入（与封装再引用无异，未使用）

       const instance = getCurrentInstance();
       //@ts-ignore
       console.log(instance.proxy.$toast("123"));

6. 组件props 如果是对象最好给默认参数，只给required会死循环报错

7. 添加router默认路由配置

8. 页面通用布局，兼容ios底部,兼容上拉加载，scroll方法要使用在.page上，且高度大于屏幕高度

9. 页面切换动画（效果不理想，未使用）

10. keep-alive，生命周期更换

11. 全局初始化Toast配置，停留时间等

12. shallowRef使用误区

13. setup使用name最后方案define-options；官方提供两种方式setup name

    • 直接使用文件命名
    • 两个script

14. vue3在chrome警告Added non-passive event listener to a scroll-blocking 'touchstart' event，暂未处理

15. ts使用 ,遍历自己取值(Recordable)

16. JSDoc

todo

• vuex替换成pinia，参考pinia分支

• setup语法糖使用，参数setup分支

  • unplugin-auto-import API自动导入，vue/vue-router/@/store(unplugin-vue-components已自动导入vant)
  • eslint校验 兼容defineExpose等(升级cli5后已兼容)
  • 其他引入 顶级变量定义未使用报错(升级cli5后已兼容)

• 升级vue-cli5,ts版本也升级(~4.5.5)

  • defineProps在setup语法糖里是否正常显示(升级cli5后已兼容)
  • webstorm projectErrors报错TS1232: An import declaration can only be used at the top level of a namespace or module. setup语法糖中import引用(升级cli5后,依然报错,待升级webstorm,升级2022.2.1后依然报错提示)
  • Fn放到types文件夹里时，编辑器不报错，代码打包报错
  • prettier 检测到 define-options格式异常(升级cli5后已兼容)
  • debounced.ts中setTimeout报错(升级cli5后已兼容)
  • webpack4 vs webpack5 迁移
    • overlay移到client内
    • disableHostCheck改成allowedHosts
    • client内progress编译进度
  • webpack5 优化
    • 开启1500毫秒聚合编译，防止编辑器格式化代码导致重复构建
    • cache开启二次启动缓存优化
    • SpeedMeasurePluginwebpack打包分析

• noResult组件改成ts

• setup里的生命周期调用情况

pinia 替换 vuex4.x

vuex vs pinia Compared to Vuex, Pinia provides a simpler API with less ceremony, offers Composition-API-style APIs, and most importantly, has solid type inference support when used with TypeScript.

vuex4.x 劣势

• ts支持不好,要写一堆接口,有些是vuex自带的方法
• 模块化后state不能合并，提示异常
• 使用不方便 injection key（可封装）

pinia 比较

• mutations移除
• 更好的ts支持
• 使用方便，不用注入key
• 扁平化模块
• 无需命名空间

替换问题

• 组合式API中使用pinia，注册pinia在初始化之后，导致组合式API中getters拿不到初始值报错
• 自动引入API
• vue tools使用
• $reset使用时只恢复没有muations前的数据，如果初始化从localstorage获取赋值了，是清空不了的

vue vs typescript

• Vue2.x 最令人诟病的一点就是对 Typescript 的羸弱支持，其根源也在于 vue2.x 的 api 大量使用了 this，造成其类型难以推断，Vue2.5 通过 ThisType 对 vue 的 typescript 支持进行了一波增强，但还是有不足之处，
• Vue3 的一个大的卖点也是改进了增强了对 Typescript 的支持。
  • 组合式API与ts使用

编辑器对比

VS code

• typescript 支持度比较好，比如.vue``template内的检测
• 社区活跃，支持各种插件
• 轻便，不占内存
• markdown支持lint校验，统一样式

webstorm

• 集成度比较高，开箱即用
• git模块yyds，支持分支对比等实用功能
• webstorm compile编译js，可以手动控制需要编译查看的文件
• SFC内template的ts兼容不好，比如：vant组件内的v-model及数据引用校验