Vue2.7 踩坑啦

0

title: Vue2.7 踩坑啦
id: 4fd731b3-77cc-4a58-9751-744757bc9c7b
date: 2023-12-25 00:03:47
auther: lvzy
cover: /upload/wallhaven-m3rgp1.png
excerpt: 不知不觉毕业已经一坤年了，啥也没学会，就会唱跳… 使用环境 尽量使用pnpm，npm偶尔出现问题，引入的某些库需要手动重新引入，目前没找到原因 我的node-v 16.17.0 vscode + volar + mac 关于Vue2.7 在我看来属于是Vue2与Vue3的中间产物 让喜欢com
permalink: /archives/1703433829469
categories:

  • qian-duan
  • cai-keng
    tags:
  • vue

  • vite

不知不觉毕业已经一坤年了，啥也没学会，就会唱跳…

使用环境

  • 尽量使用pnpm，npm偶尔出现问题，引入的某些库需要手动重新引入，目前没找到原因

  • 我的node-v: 16.17.0

  • vscode + volar + mac

    关于Vue2.7

  • 在我看来属于是Vue2与Vue3的中间产物

  • 让喜欢composition-api的童鞋在兼顾浏览器兼容的同时可以尝试新写法

  • 当然，这个还是有些东西跟V3不是那么的相似，还是采用了Vue2的逻辑

    举个🌰

  • 这是踩坑！scf-setup需要两个script标签，主动声明model属性，不然无法实现v-model语法糖。如果需要声明组件name。也需要在新起的script中导出。

ca567ca6b1c54061bee4de8eb348a503~tplv-k3u1fbpfcp-watermark.png

  • vue2.7中不可将 :test.sync="testValue"改写为v-model:test="testValue"，不生效！
  • Vue3中将$listeners和$attrs合并了，使用时只需要v-bind='$attrs'即可，但是在Vue2.7中还是需要用到v-on='$listeners'，Vue3文档链接

5eb6305c2e82407cae37e9c676a12160~tplv-k3u1fbpfcp-watermark.png

  • Vue3的Jsx转化插件较为完美，没有发现啥比较难用的点。但是在Vue2.7的转化插件，嗯…跟坤哥当NBA代言人一样让人XXXXX。v-model无法使用

这个链接带了些啥？

当然是我家咯咯的？？

  • 纯ts项目，支持scf-setup，tsx，sfc，sfc-setup-ts
  • tsx请使用render返回template，此种方式可以使用v-model，保留ts类型推断。具体可以查看test.tsx组件。
  • 简单使用Vuex，使用Vuex实属无奈之举，纯属公司项目必备，如果有需要可以自行修改为pinia。

    • useStoreState

      image.png使用的时候保留类型推断，module需要存在于IRootStoreState。返回的是一个computedState，可以直接更改。举个例子

          const username = useStoreState<string>('username', 'SET_USER', 'user')
    function todo() {
      username.value += '又是两年半了'
    }
    // 点击触发
    todo()
    // <span @click="todo">{{ username }}</span>
  • 简单封装了下axios，使用vue-request做进一步处理，具体参考vue-request文档
  • element-ui不建议使用vite自动引入，el-message等相关样式会有问题。此处report一个问题，是不是我sass版本太高了。每次跑element的样式狂警告，写法需要替换。。啥时候能维护下？自定义样式也出现问题，无法使用官网中提供的复写变量的方法
     /* 改变主题色变量 */ 
 $--color-primary: teal; 
 /* 改变 icon 字体路径变量，必需 */ 
 $--font-path: '~element-ui/lib/theme-chalk/fonts'; 
 @import "~element-ui/packages/theme-chalk/src/index";
  • 简单重新写了份RouteConfig类型。根据自己喜欢的来哈
  • 项目中配置了挺多的自动导入
    • @vueuse/core
    • vue
    • vuex
    • vue-router
    • …具体参考vite.config.ts
  • 带了antfu大佬的eslint配置和我自己搞得简单的stylelint
  • 带了echarts

    好像也没啥了？

    哦！还支持Pug模板。

一个简单的探索项目，该踩坑踩坑。
如果大家，有其他的问题，可以给我留言，大家一起看看咋解决～～