VSCode 使用uni-app的方法

已于 2023-04-21 09:01:16 修改
阅读量2.7k 收藏 3
点赞数 1
文章标签： vscode uni-app vue.js Powered by 金山文档
于 2023-03-17 17:30:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71879136/article/details/129624567
版权
本文介绍了如何全局安装vue-cli并使用它来创建uni-app项目。创建后，通过VSCode打开项目，安装相应的语法提示插件，并提供从git获取uni-app代码块的方法。接着，阐述了运行和发布项目的npm命令。
摘要由CSDN通过智能技术生成

  1. cli工程全局安装vue-cli

npm install -g @vue/cli

  1. 通过cli创建uni-app项目

vue create -p dcloudio/uni-preset-vue uni-app

  1. 选择项目模板，可自由选择如下图：👇执行两个命令

  1. 使用vscode打开创建的项目

  1. 安装vue语法提示插件👇

  1. 安装组件语法提示

npm i @dcloudio/uni-helper-json

  1. 从 git 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块

  1. 运行项目

npm run dev:%PLATFORM%

  1. 发布项目

npm run build:%PLATFORM%

%PLATFORM% 可选值参见package.json中的scripts

WeChat624
关注
用vsCode开发uni-app(vue + ts)项目流程
qq_45532769的博客
05-04 3285
如果我们需要创建一个uniapp的 vue3 + ts 项目可以使用HBuilder工具，但该工具不能识别ts的类型声明错误，所以我们用vsCode工具来创建项目。
uni-preset-vue-master uniapp项目模板
12-02
3. **脚手架工具**：uni-app提供了命令行工具，通过npm或yarn安装后，可以使用uni init命令创建新项目，选择uni-preset-vue模板，一键生成项目骨架。 4. **插件市场**：uni-app有丰富的插件市场，提供了各种组件和...
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
weixin_41783389的博客
09-11 328
uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、以及各种小程序。深受广大前端开发者的喜爱。uniapp官方也提供了自己的IDE工具HBuilderX，可以快速开发uniapp项目。但是很多前端的同学已经比较习惯使用VSCode去开发项目，为了开发uniapp项目再去切换开发工具，而且对新的开发工具也要有一定的适应过程，大多数前端的同学...
VSCode 配置uni-app的方法
10-15
主要介绍了VSCode 配置uni-app的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
【uni-app】用 VS Code 开发 uni-app 项目
最新发布
weixin_40874076的博客
09-14 2630
项目采用 Vue3 + TS 开发 uni-app 项目，所以需要分别安装 Vue3 + TS 插件 和 uni-app 插件。没开发过 Vue3 + TS 项目的小伙伴注意，需要先安装 Vue3 和 TS 的插件，并完成以下配置 👇。这一步处理很关键，否则 TS 项目无法校验组件属性类型。：快速创建 uni-app 页面。：uni-app 代码提示。
在vscoed 中运行 uniapp 项目
热门推荐
yiyi_11的博客
02-21 1万+
在 vscode 中开发并运行 uniapp，使用 uniapp开发 小程序应用
VSCode打开HBuilderX创建的uniapp项目
战族狼魂的博客
08-22 1203
如果您希望在 VSCode 中直接使用 HBuilderX 提供的部分功能（如打包、编译等），可以通过外部命令集成到 VSCode 中，或者在开发完成后回到 HBuilderX 中使用其特定功能。通常，HBuilderX 会自动为 UniApp 项目配置开发服务器，但在 VSCode 中，您需要手动通过命令行启动它。现在，您可以在 VSCode 中进行 UniApp 项目的开发和调试。在 VSCode 中打开 HBuilderX 创建的 UniApp 项目文件夹。确保您的 VSCode 已经安装并配置好。
vscode运行Hbuildx创建的uniapp项目
weixin_49455560的博客
06-17 993
【代码】vscode运行Hbuildx创建的uniapp项目。
VSCode 配置uni-app全攻略：从创建到运行
运行项目使用以下命令，其中`%PLATFORM%`需要替换为具体的平台，如`h5`或`app-plus`： ``` npm run dev:%PLATFORM% ``` 发布项目则执行： ``` npm run build:%PLATFORM% ``` 具体可用的`%PLATFORM%`值可以在`package...
VScode运行uniapp项目
啵啵的女孩
08-13 1万+
一、在VScode中创建项目 vue create -p dcloudio/uni-preset-vue my-project 二、在各种小程序端运行 //启动项目（微信小程序） npm run dev:mp-weixin //启动项目（h5） npm run dev:h5 //启动项目（app平台） npm run build:app-plus （也就是App平台运行调试不支持cli方式，需在HBuilderX中运行调试） //启动项目（支付宝小程序） npm run dev:m
用 VS Code 开发 uni-app 项目
phi1111的博客
08-30 891
这一步处理很关键，否则 TS 项目无法校验组件属性类型。
如何在vscode中开发运行uniapp项目
weixin_73320836的博客
02-08 1万+
【直接下载即可用】
使用VScode开发uni-app
2301_79232648的博客
01-22 2150
使用VScode开发uni-app
uniapp项目实践第二章：使用vscode开发uniapp项目
jakelihua
08-16 3882
uniapp项目实践第二章：使用vscode开发uniapp项目
uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新
wocwin的博客
05-16 5801
uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新；解决Vs Code 出现`类型“{ class: string; }”的参数不能赋给类型`错误
vscode uniapp 开发环境快速配置
manixchenyang的博客
05-17 2966
vscode替代hbuider解决微信小程序开发解决卡顿问题和使用体验问题提升开发效率。现代化web开发避免不了H5以及混合应用开发，降本增效的必要， 想必hbuilderx的语法提示以及插件没有webstorm和vscode方便，让开发效率大大折扣，其实用vscode好处就是装多少插件都丝毫不卡顿，下面你也可以按照下面的方法尝试一下，由于最近电脑换了个系统，就重新配置下顺便记录下
如何使用 vscode 开发 uniapp
weixin_42178050的博客
12-09 2971
如何使用vscode 开发 uniapp 项目
用 VS Code 和Hbuilder 开发 uni-app 项目
y516369的博客
08-02 679
用 VS Code 和Hbuilder 开发 uni-app 项目
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WeChat624

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值