vscode开发 vue3+ts 的 uni-app 微信小程序项目

创建uni-app项目:

# 创建用ts开发的uni-app
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
# 创建用js开发的uni-app
npx degit dcloudio/uni-preset-vue#vite 项目名称

VS Code 配置

为什么选择 VS Code ?

  • HbuilderX 对 TS 类型支持暂不完善
  • VS Code 对 TS 类型支持友好,熟悉的编辑器

1.将创建好的项目用vscode打开

2.安装uni-app插件:
在这里插入图片描述

3.安装类型声明文件

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

如下表示安装完成:
在这里插入图片描述

4.配置tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": ["@dcloudio/types",
    "@types/wechat-miniprogram", // 配置1
    "@uni-helper/uni-app-types"] // 配置2
  },
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"] // 配置3
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

5.解决vscode中json文件注释报错问题
在vscode设置中搜索文件关联,点击添加项,然后配置如下两项
在这里插入图片描述

编译和运行 uni-app 项目

在这里插入图片描述

1.在manifest.json中添加微信小程序appid

/* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "XXXXXX",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    },

2.安装依赖

pnpm install

3.编译

pnpm dev:mp-wexin

编译完成后项目中多了一个dist目录

4.导入微信开发者工具
打开 微信开发者工具, 导入 dist\dev\mp-weixin 运行。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/544013.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

unity记一下如何播放动画

我使用的版本是2022.3.14fc 展开你的模型树,是会出现这个三角形的东西的 然后在资源面板创建一个animation controller 进去之后,把三角形拖进去,就会出现一个动画,然后点击他 在左侧给他创建这么个状态名字,类型…

AskManyAI:一个GPT、Claude、Gemini、Kimi等顶级AI的决斗场

一直以来很多人问我能不能有个稳定,不折腾的全球AI大模型测试网站,既能够保证真实靠谱,又能够保证稳定、快速,不要老动不动就挂了、出错或者漫长的响应。 直到笔者遇到了AskManyAI,直接就惊艳住了! 话不多…

第17天:信息打点-语言框架开发组件FastJsonShiroLog4jSpringBoot等

第十七天 本课意义 1.CMS识别到后期漏洞利用和代码审计 2.开发框架识别到后期漏洞利用和代码审计 3.开发组件识别到后期漏洞利用和代码审计 一、CMS指纹识别-不出网程序识别 1.概念 CMS指纹识别一般能识别到的都是以PHP语言开发的网页为主,其他语言开发的网页识…

springboot-tomcat冲突

maven tomcat版本冲突异常 记录一个错误 在项目启动时报错: java.lang.AbstractMethodError: org.apache.tomcat.websocket.server.WsSessionListener.sessionCreated(Ljavax/servlet/http/HttpSessionEvent;)V 引入Session报错。 原因:Springboot默…

数据仓库—维度建模—维度表设计

维度表 维度表(Dimension Table)是数据仓库中描述业务过程中各种维度信息的表,用于提供上下文和描述性信息,以丰富事实数据的分析 维度表是维度建模的灵魂所在,在维度表设计中碰到的问题(比如维度变化、维度层次、维度一致性、维度整合和拆分等)都会直接关系到维度建模…

基于R语言实现的负二项回归模型【理解与实现】-理解负二项回归模型和泊松回归模型之间的区别

前言 我们可以在R语言中使用MASS包中的glm.nb函数来拟合负二项模型,以及使用glm函数来拟合泊松模型。以下是一个详细的过程,包括模拟数据的生成、模型的拟合、结果的比较和解释。 需要的包 if (!require("MASS")) install.packages("M…

【Leetcode每日一题】 分治 - 颜色分类(难度⭐⭐)(57)

1. 题目解析 题目链接:75. 颜色分类 这个问题的理解其实相当简单,只需看一下示例,基本就能明白其含义了。 2.算法原理 算法思路解析 本算法采用三指针法,将数组划分为三个区域,分别用于存放值为0、1和2的元素。通过…

CentOS 7安装Zookeeper

说明:本文介绍如何在CentOS 7操作系统下使用Zookeeper 下载安装 首先,去官网下载所需要安装的版本,我这里下载3.4.9版本; 上传到云服务器上,解压 tar -xvf zookeeper-3.4.9.tar.gz修改配置 进入Zookeeper目录下的co…

3. 安装arrach结构的Mysql

提示:arm的centos上面安装arrach结构的Mysql 文章目录 前言一、查看已经安装过的并卸载mysql二、创建mysql用户组1.设置用户组2. 安装3.设置启动4.查看密码5.修改登录密码6.授权7.修改连接8.设置参数 常见问题排查1. 启动失败查看:2. 用户操作3. 踩坑解决…

【已开源】​基于stm32f103的爬墙小车

​基于stm32f103的遥控器无线控制爬墙小车,实现功能为可平衡在竖直墙面上,并进行移动和转向,具有超声波防撞功能。 直接上: 演示视频如:哔哩哔哩】 https://b23.tv/BzVTymO 项目说明: 在这个项目中&…

Unity 2D让相机跟随角色移动

相机跟随移动 最简单的方式通过插件Cinemachine 在窗口/包管理器选择全部找到Cinemachine,导入。然后在游戏对象/Cinemachine创建2D Camera。此时层级中创建一个2D相机。选中人物拖入检查器Follow。此时相机跟随人物移动。 修改相机视口距离 在检查器中Lens下调正…

linux学习:文件属性

在操作文件的时候,经常需要获取文件的属性,比如类型、权限、大小、所有者等等, 这些信息对于比如文件的传输、管理等是必不可少的,而这些信息 这三个函数的功能完全一样,区别是:stat( )参数是一个文件的名字…

UI设计/交互设计/视觉设计项目汇报/作品集Figma/PPT模板

作为UI设计/交互设计/视觉设计师,创建作品集对于向潜在客户或雇主展示您的技能、创造力和风格至关重要。以下分步指南可帮助您创建令人印象深刻的作品集: 选择您的最佳作品:选择您最强大且最相关的设计项目,将其纳入您的作品集。…

Java应用中文件上传安全性分析与安全实践

✨✨谢谢大家捧场,祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心哦!✨✨ 🎈🎈作者主页: 喔的嘛呀🎈🎈 目录 引言 一. 文件上传的风险 二. 使用合适的框架和库 1. Spr…

CCF区块链论文录用资讯--ICDE 2024

ICDE是CCF A类会议 (数据库/数据挖掘/内容检索) 其2024录用了8篇区块链论文 Database technology for Blockchains I Efficient Partial Order Based Transaction Processing for Permissioned Blockchains (针对许可区块链的高效的基于偏序…

Niobe开发板OpenHarmony内核编程开发——事件标志

本示例将演示如何在Niobe Wifi IoT开发板上使用cmsis 2.0 接口使用事件标志同步线程 EventFlags API分析 osEventFlagsNew() /// Create and Initialize an Event Flags object./// \param[in] attr event flags attributes; NULL: default values./// \return e…

openstack安装dashboard后登录网页显示404错误

1. 2.进入该目录vim /etc/httpd/conf.d/openstack-dashboard.conf 增加这一行 WSGIApplicationGroup %{GLOBAL} 重启httpd后就可以访问了

Devin AI: The World’s First AI Software Engineer

Devin AI是Cognition AI团队推出的一款名为Devin的人工智能软件工程师,它被誉为世界上第一个完全自主的AI软件工程师。Devin AI在2024年3月12日发布,并在SWE-bench编码基准测试中设立了新的技术标杆。 Devin AI具备多项强大的能力,包括学习如…

数据结构与算法——20.B-树

这篇文章我们来讲解一下数据结构中非常重要的B-树。 目录 1.B树的相关介绍 1.1、B树的介绍 1.2、B树的特点 2.B树的节点类 3.小结 1.B树的相关介绍 1.1、B树的介绍 在介绍B树之前,我们回顾一下我们学的树。 首先是二叉树,这个不用多说&#xff…

【5G PHY】5G无线链路监测原理简述

博主未授权任何人或组织机构转载博主任何原创文章,感谢各位对原创的支持! 博主链接 本人就职于国际知名终端厂商,负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作,目前牵头6G算力网络技术标准研究。 博客…