Vue2.7+Vite+Tsx的一些探索
不知不觉毕业已经一坤年了,啥也没学会,就会唱跳...
本文用到项目的git地址 ikun专属链接
使用环境
- 尽量使用
pnpm
,npm偶尔出现问题,引入的某些库需要手动重新引入,目前没找到原因 - 我的
node-v: 16.17.0
vscode + volar + mac
关于Vue2.7
- 在我看来属于是
Vue2
与Vue3
的中间产物 - 让喜欢
composition-api
的童鞋在兼顾浏览器兼容的同时可以尝试新写法 - 当然,这个还是有些东西跟V3不是那么的相似,还是采用了Vue2的逻辑
举个🌰
- Vue3中将
$listeners
和$attrs
合并了,使用时只需要v-bind='$attrs'
即可,但是在Vue2.7
中还是需要用到v-on='$listeners'
,Vue3文档链接
- 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
使用的时候保留类型推断,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模板。
一个简单的探索项目,该踩坑踩坑。 如果大家,有其他的问题,可以给我留言,大家一起看看咋解决~~
转载自:https://juejin.cn/post/7197222865833869368