分享好友 最新动态首页 最新动态分类 切换频道
vue3 + vant3.x 项目 更新vant typescript---记录总结
2024-12-26 13:14
 
 
 

vite.config.js

vue3 + vant3.x 项目 更新vant types<i></i>cript---记录总结

 
 
 

postcss.config.js

 

注意 main.js 引入 lib-flexible

 
 
 
 

src/router/index.js

 

main.js

 

app.vue

 
 
 

src/store/common.js

 

main.js

 
 

src/utils/http.js

 

src/servers/common.js

 
 
 
 

vite.config.js

 

// vscode 路径提示
jsconfig.json

 
 

下载

 

main.js

 
 
 
 
 
 
 
 
 
 
 

.eslintrc.js 修改

 

常用命令
检测文件
npx eslint “src/App.vue”
npx eslint --ext .js,vue src
npx eslint “src*.{js,vue}”

格式化文件
npx eslint “src*.{js,vue}” --fix

添加 .eslintignore

 
 

如果您使用 ESLint,请安装 eslint-config-prettier 以使 ESLint 和 Prettier 彼此配合得很好。它会关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则。
pnpm add eslint-config-prettier prettier -D

.eslintrc.js 修改

 

添加 .prettierrc.json

 

添加 .prettierignore

 

格式化代码
npx prettier --write .

pnpm add husky lint-staged -D

npm pkg set scripts.prepare=“husky install”

package.json 生成命令

 

npm run prepare
根目录生成 .husky 文件夹

npx husky add .husky/pre-commit “npx lint-staged”
.husky 文件夹 生成 pre-commit
pre-commit

 

package.json

 
 

下载

 

添加 commitlint.config.js
注意 如果是命令创建注意修改编码为 utf-8

 

使用 Husky 的 commit-msg 钩子

 

commitlint.config.js
1:0 error Parsing error: Invalid character
echo "module.exports 编码不是utf-8
把 commitlint.config.js 编码格式改为 utf-8

在你使用git拉取代码的时候,git会自动将代码当中与你当前系统不同的换行方式转化成你当前系统的换行方式,从而造成这种冲突。

解决方案 vscode

  • 在设置里Eol 选

  • 修改git全局配置,禁止git自动将lf转换成crlf, 命令 然后重新克隆项目
    git config --global core.autocrlf false

 
 

useElementSize 获取不到元素的边距,可以嵌套一层给内层元素添加边距

 
 
 
 
 
 
 

rows=“1”
autosize

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

基于 button 组件二次封装时,想要之前的属性 v-bind=“$attrs”

 

添加完之后你会发现 click 事件多次触发 inheritAttrs:false

 
 
 
 
 
 

注意 Dialog 要设置 closeOnPopstate: false 否则后面会出现弹框一闪

closeOnPopstate 是否在页面回退时自动关闭

 

如果当前页还有其他路由跳转或者确定之后跳转其他页面(出现死循环

修改如下

 
 
 
 
 

腾讯选点组件

 
 
 
 

loadJs

 
 
 
 

terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.

 
 

下载

 

配置

vite.config.ts

 

src/main.ts

 

编写通用组件

src/components/svgIcons/index.vue

 

tsconfig.json

 

使用

svg存放的地址
如果是文件夹以 - 拼接
例1:src/assets/mask_star.svg
例2:src/assets/mine/mask_star.svg

引入组件

 
 
 

测试公众号申请地址

配置

代码

 
 
 

测试

下载

 

wx.d.ts

 

使用

 
 

在公众号里进入分享手机端才可以展示自定义标题

 
 
 
 
 

下载

 

vite.config.ts

 
 
 
 

引入使用

 
 
 
 

下载

 

vite.config.ts

 

tsconfig.json

最新文章
java agent-03-Java Instrumentation 结合 bytekit 实战笔记 agent premain
java agent 介绍java agent-02-Java Instrumentation APIjava agent-03-Java Instrumentation 结合 bytekit 实战笔记 agent attachjava agent-03-Java Instrumentation 结合 bytekit 实战笔记 agent premain前面几篇文档,我们简单介绍了一
capcut app 2024v13.4.0
《capcut》app2024全新版本来安装吧,让你享受全新的剪辑功能的新版本,适用于不同类型的手机,包括安卓和ios手机都可以支持。软件可以提供更多视频的创作,更多的专属视频编辑直接完成了,让你的作品更加的精彩的神器,辅助你进行更好的剪
2020年3月App Annie中国厂商出海收入排行榜单
  本月榜单头部区域变化不大,莉莉丝游戏蝉联榜首,腾讯与FunPlus互换名次,网易和IGG则保持原有位置不变。  打开App Annie广告素材库功能,《剑与远征》的各类素材着实让人眼花缭乱目不暇接。  2020年3月《剑与远征》在韩国Google P
12月11日橡塑行业情报
1. 12月11日橡塑指数为68412月11日橡塑指数为684点,较昨日下降了1点,较周期内最高点1060点(2012-03-14)下降了35.47%,较2020年04月06日最低点528点上涨了29.55%。(注:周期指2011-12-01至今)2. 河南神马印染5000吨化纤印染成功试生产12
90.99万的宝马X3 M怎么选
使用经济性虽然是买车时的一个关注点,但对那些一年只跑几千公里的用户来说,其实影响很小。我们今天说的。该车的实力好坏还是要了解过才知道,接下来就一起看看吧。先来看下宝马X3 M的外观,宝马X3 M车头造型走了端庄路线,看起来十分优雅
AI文案生成图片工具:提升创意效率与应用潜力的智能技术
AI文案生成图片工具是近年兴起的技术,它能够将文字信息通过智能算法转换成相应的图像。这种技术巧妙地将科技与创意结合,显著提升了创意制作的效率,并在多个领域展现出广阔的应用潜力。使用场景多样在商业界,此工具助力企业迅速制作宣传
5个关键步骤,让您的服装展示在搜索引擎上脱颖而出!
在当今数字化时代,让您的服装展示在搜索引擎上脱颖而出至关重要。随着消费者越来越倾向于在网上搜索和购买服装,有效地优化您的服装展示内容,使其在搜索引擎结果页中排名靠前,就成了一项必不可少的任务。以下是五个关键步骤,可帮助您提
db2 replace函数的用法_高效的 10 个Pandas函数,你都用过吗?
这篇文章将会配合实例,讲解10个重要的pandas函数。其中有一些很常用,相信你可能用到过。还有一些函数出现的频率没那么高,但它们同样是分析数据的得力帮手。介绍这些函数之前,第一步先要导入pandas和numpy。Que
AI一键换商品背景,电商运营的最佳助手!
用AI做电商太好赚了!电商销冠都在用的商品图、营销方案生成神器,点击免费用 → https://ai.sohu.com/pc/generate/byProImg?_trans_=030001_yljdaispt 宝子们,大家好!在这个竞争激烈的电商时代,产品的第一印象往往决定了买家的购买决策
相关文章
推荐文章
发表评论
0评