vue3 + vant3.x 项目 更新vant typescript---记录总结

   日期:2024-12-26    作者:kmf5i 移动:http://oml01z.riyuangf.com/mobile/quote/41275.html
 
 
 

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


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号