在VScode中开发uni-app

最新推荐文章于 2025-05-21 14:03:09 发布
原创 最新推荐文章于 2025-05-21 14:03:09 发布 · 5.4k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

本文介绍如何在VSCode环境中高效地进行uni-app项目开发，包括配置开发环境、使用npm命令进行热重启的方法，以及在微信开发者工具中手动打开生成的项目以实现热重启效果的技巧。

在VScode中开发uni-app

话不多说，直接上链接
当 uni-app 遇见 vscode

看完之后需要注意的
使用命令

npm run dev:%platform%

之后，我们需要手动将生成的dist文件夹下mp-weixin当做项目在微信开发者工具中打开，这样才会有热重启的效果（热重启很慢）

xk_initial
关注
如何直接使用VSCode中开发Uni-app：`uniapp run`插件的使用教程 无需启动HBuilderX了!
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
04-08 1349
于是，我就开始寻找替代方案，想着是不是能在我熟悉的VSCode里开发Uni-app。VSCode的插件多，功能强大，简直是我工作中必不可少的ide了. 可一转到Uni-app的开发，就得跳到HBuilderX，搞得我每天都得切换开发环境。如果你也像我一样，对HBuilderX不太感冒，或者你也想在熟悉的VSCode中开发Uni-app项目，不妨试试这个插件。当然，这个插件也不是完美无缺，偶尔也会遇到一些小问题，比如与HBuilderX或微信开发者工具的兼容性问题，但大多数时候，它都能很好地工作。
1. 使用VSCode开发uni-app环境搭建
最新发布
工作学习总结，技术分享
10-13 1136
欲善其事，必先利其器。官方的HBuilderX使用起来很不习惯，所以还是折腾一下使用VSCode来作为开发工具。
VSCode 配置uni-app的方法
11-20
CＬＩ工程全局安装vue-cli npm install -g @vue/cli 通过cli创建uni-app项目  vue create -p dcloudio/uni-preset-vue uni-app 选择项目模板，可自由选择如下图：:backhand_index_pointing_down: 使用vscode打开创建的项目 安装vue语法提示插件:backhand_index_pointing_down: cli工程自带uni-app&5+app语法提示 安装组件语法提示 npm i @dcloudio/uni-helper-json 从 git 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。 使用scss
用vsCode开发uni-app(vue + ts)项目流程
阿超的博客
05-04 4394
如果我们需要创建一个uniapp的 vue3 + ts 项目可以使用HBuilder工具，但该工具不能识别ts的类型声明错误，所以我们用vsCode工具来创建项目。
用 VS Code 和Hbuilder 开发 uni-app 项目
y516369的博客
08-02 1254
用 VS Code 和Hbuilder 开发 uni-app 项目
【VS Code】一文搞定！在VS Code等ide中开发运行UniApp项目的完整指南
VT_馒头的博客
02-10 1万+
UniApp作为"一次开发，多端运行"的跨平台框架，配合微软的VS Code这个轻量级编辑器，堪称开发效率神器组合。相比HBuilderX，VS Code拥有更丰富的插件生态和自由的配置空间，特别适合已经熟悉前端开发的程序员。 同时，UniApp使用Vue相关的语法进行开发，这对于前端开发工程师来说，并不需要太多的学习成本，上手难度较低。但是如果还需要学习配套的HBuilderX工具来开发的话，那么就会产生较大的学习成本了。为了达到降本增效的目的，能够直接在VS Code中进行开发就显得尤为重要。
使用VSCode开发uniapp
山高路远，后会总有期。
05-21 3595
使用VSCode开发uniapp+ts
关于vscode开发uni-app中依赖@uni-helper/uni-app-types的配置 “vueCompilerOptions“不允许属性 nativeTags问题解决
qq_45937792的博客
05-29 7443
vscode开发uniapp+vue3+ts使用@uni-helper/uni-app-types时tsconfig.json中的 "vueCompilerOptions"属性配置问题
在vscoed 中运行 uniapp 项目
热门推荐
yiyi_11的博客
02-21 2万+
在 vscode 中开发并运行 uniapp，使用 uniapp开发 小程序应用
用 VS Code 开发 uni-app 项目
phi1111的博客
08-30 1458
这一步处理很关键，否则 TS 项目无法校验组件属性类型。
在vscode中运行uniapp项目
qq_45219496的博客
11-29 5223
首先就是你得有一个uniapp项目，来自HBuilder X创建的，使用其他方式创建的不在参考范围。第三步、点击启动调试，如果有uniapp run，就直接点击，没有就安装扩展回到第一步。第二步、添加配置，如果有uniapp run，就直接点击，没有就安装扩展回到第一步。添加配置后，可以通过platform配置启动方式，h5、微信小程序、百度小程序什么的。不用看，就是用HBuilder X创建的项目，使用vscode启动，没有别的套路。第一步、使用vscode下载插件。
uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新
wocwin的博客
05-16 8466
uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新；解决Vs Code 出现`类型“{ class: string; }”的参数不能赋给类型`错误
在vscode中开发运行uni-app项目
cuicanxinghui的博客
11-07 2935
vue create -p dcloudio/uni-preset-vue 项目名。确保电脑已经安装配置好了node、vue等相关环境依赖。第一次打开项目 pages.json 文件会报错，安装下述插件有利于uni-app项目的开发。打开设置，查找文件关联，配置如图两项，项目创建成功后在vscode中打开。在终端运行命令，启动项目。这里选择【默认模版】插件安装（如图所示）
如何使用 vscode 开发 uniapp
weixin_42178050的博客
12-09 4000
如何使用vscode 开发 uniapp 项目
VS Code 开发 uni-app 项目
wonderfulgood的博客
09-20 944
这一步处理很关键，否则 TS 项目无法校验组件属性类型。::: danger 版本升级。
使用VScode开发uni-app
2301_79232648的博客
01-22 2536
使用VScode开发uni-app
vscode创建uni-app项目
qq_39167934的博客
05-09 5942
uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架，官方推荐的开发工具为 HBuilderX，使用起来有很好的开发体验。 不过，由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode，不想更换编辑器。直接使用 vscode 开发 uni-app，其体验并不是很好。 其实 uni-app 和 vscode 也可以很搭，接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。 CLI 工程 全局安装 vue-cli 3.x（如已安装请跳过
vscode 开发 uni-app 微信小程序
05-10
为了在 VSCode 中开发 Uni-app 微信小程序，需要先完成环境搭建。这包括安装 Node.js 和 npm 工具链以及初始化项目所需的依赖项。 确保已安装最新版本的 Node.js 和 npm 后，在终端执行以下命令以全局安装 `@vue/...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值