如何使用vscode来开发uni-app

已于 2022-05-24 19:11:16 修改
阅读量3.3k 收藏 1
点赞数 1
文章标签： vscode ide visual studio code
于 2022-01-08 19:28:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuguidian1114/article/details/122384930
版权

其实总的来说还是无法完全脱离HBuilder X的，但是因为一直使用vs code开发习惯了 使用HBuilder X真的很不上手 所以我们可以使用这个方法

  1. 使用 HBuilder X 运行项目，将它运行到你想要的平台 
  2. 使用 VsCode 打开要开发的项目
  3. 在 VSCode 中安装插件：
    1. uni-helper
    2. uni-app-snippets
    3. uni-app-schemas
    4. uni-ui-snippets
  4. 最后只要在vscode中进行代码的开发就好了 保存文件后会自动运行

补充：使用cli创建项目就可以直接在vscode，不过最近开发了一段时间以后发现开发uniapp还是用hbuilder比较方便，这个各有各的看法，大家根据自己的喜好来就可

鱼子酱酱酱
关注
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项目（较全）
热门推荐
黑客与画家
05-26 3万+
cli工程全局安装vue-cli npm install -g @vue/cli 通过cli创建uni-app项目 vue create -p dcloudio/uni-preset-vue uni-app 选择项目模板，可自由选择如下图： 创建uni-项目 使用vscode打开创建的项目 安装vue语法提示插件 cli工程自带uni-app&5+app语法提示 安装组件语法提示 npm i @dcloudio/uni-helper-json 从 git 下载 uni-app 代码块
【uni-app】用 VS Code 开发 uni-app 项目
最新发布
weixin_40874076的博客
09-14 2637
项目采用 Vue3 + TS 开发 uni-app 项目，所以需要分别安装 Vue3 + TS 插件 和 uni-app 插件。没开发过 Vue3 + TS 项目的小伙伴注意，需要先安装 Vue3 和 TS 的插件，并完成以下配置 👇。这一步处理很关键，否则 TS 项目无法校验组件属性类型。：快速创建 uni-app 页面。：uni-app 代码提示。
【uni-app】【Android studio】手把手教你运行uniapp项目到Android App
向来缘浅，奈何情深
08-02 8525
这个如果只是为了验证apk效果，可以先继续打包，但是如果要上架国内应用市场，得去提供的(链接)[https://uniapp.dcloud.net.cn/tutorial/app-privacy-android.html#]里将相关的隐私申明等配置好。android studio 代理设置，check connection只要能连上https://dl.google.com就行。打包好了之后会有提示，把apk文件传到手机上运行就能看效果了。Hbuilder选择。
使用VS Code创建编写uniapp项目(vue3+ts 微信小程序)
2301_77104436的博客
02-19 1791
使用VS Code创建编写uniapp项目(vue3+ts 微信小程序)
Uniapp 运行到 Android 真机或模拟器
卡尔特斯
01-03 7567
如果没有安卓基座插件，这行会显示安卓基础插件，点击安装后，就能出现。，如果没有安卓基座插件，这行会显示安卓基础插件，点击安装后，就能出现。，各个品牌打开开发者模式方式不一样，可自行百度即可，一般是在。，随便建一个空项目，打开后，点击右上角工具栏中的模拟器图标。创建项目后，数据线连接电脑和手机，在弹出的窗口中选择。注意在创建模拟器选择镜像的时候，需要看下当前设备的。次，输入手机密码，就会进入了开发者模式。开启开发者模式后，在设置中找到。开发工具，点击菜单栏的。开发工具，点击菜单栏的。
uni-app的使用体验总结
02-24
没用之前以为真和Vue一样，用了之后才知道。有点类似Vue和小程序结合的感觉。...配置项跟着文档来，开发环境也是现成的，下载HBuilderX导入项目就能运行，日常开发习惯了VSCode，所以HBuilderX的主要作
uni-preset-vue-master uniapp项目模板
12-02
总的来说，uni-preset-vue-master项目模板是uni-app生态的重要组成部分，它为开发者提供了标准化的开发环境，减少了重复的工作，使开发者能够更加专注于业务逻辑和用户体验的实现。通过学习和使用这个模板，开发者...
uni-helper：使uni- *在其他编辑器（例如VSCode和WebStorm）中更好地工作
02-21
【uni-helper】是一款专为开发者设计的工具，旨在优化基于uni-app框架的项目在非HBuilderX环境下的开发体验，特别是对于使用Visual Studio Code (VSCode) 和 WebStorm 等第三方编辑器的用户。uni-app是一个跨端的...
在vscoed 中运行 uniapp 项目
yiyi_11的博客
02-21 1万+
在 vscode 中开发并运行 uniapp，使用 uniapp开发 小程序应用
vue-to-uniapp:用于代码适配性的转换
05-07
vue to uni-app 用于公司内部项目的文件转换 把 Vue 组件文件放到 source 文件夹中，输出到 result 文件中转换好的可用在 uni-app 的组件文件 主要转换的方面有如下几个： template 标签转换： div/li/ul 标签转换为 view img 转换为 image，添加 mode='widthFix'属性 span 转换为 text 标签 内部的 template 标签，转换为 block 标签 transition 标签，转换为 uni-transition 标签 script 标签内部内容不转换 style 标签内容，暂时只考虑 less 对于 rem 单位，乘以 200 转换为 px 单位 对于 px 单位，乘以 2 保持为 px 单位 转换后还要注意一下几个方面的改写： 如果之前图片是作为 div 的背景图，那在 uni-app 里面是不支
小程序-uni-app：uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode
snowball的博客
06-08 1万+
小程序 uniapp开发 vue3 ts pnpm 开发 全记录
使用 VSCode 开发 uniapp
Gblfy_Blog
01-03 5072
虽说 HBuilder X 开发体验还算不错，但是有时候金窝银窝不如自己的狗窝，当我们习惯了 VSCode 之后，有时候不太愿意换开发工具。 那么怎么使用 VSCode 来开发 uniapp 呢？ 其实是有办法的。 使用 HBuilder X 运行项目 使用 VSCode 打开项目 在 VSCode 中安装插件： uni-helper - 让开发者在 VSCode 中开发 uni-* 的体验尽可能好。 uni-app-snippets - 支持 uni-app 基本能力的代码片段，包括组件和 API u
详解uni-app项目运行在安卓真机调试
weixin_42397937的博客
05-28 6557
UNI-APP学习系列之详解uni-app项目运行在安卓真机调试以上就是今天要讲的内容，本文介绍了UNI-APP学习系列之详解uni-app项目运行在安卓真机调试的全部内容，后续我会基于VSCode继续进行开发讲解UNI-APP框架，喜欢的请点击关注，UNI-APP框架使用教程将会持续更新下去。
用 VS Code 开发 uni-app 项目
Singe_lq的博客
11-21 1382
项目采用 Vue3 + TS 开发 uni-app 项目，所以需要分别安装 Vue3 + TS 插件 和 uni-app 插件。没开发过 Vue3 + TS 项目的小伙伴注意，需要先安装 Vue3 和 TS 的插件，并完成以下配置 👇。这一步处理很关键，否则 TS 项目无法校验组件属性类型。
如何使用Vscode开发Uni-app项目以及注意事项详解
顾风的博客
03-28 4085
关于在Vscode开发uniapp项目
如何使用 vscode 开发 uniapp
weixin_42178050的博客
12-09 2974
如何使用vscode 开发 uniapp 项目
使用uni-app构建android项目
宣晨光
08-30 1328
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值