DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-08-16 15:32
  • 更新:2021-03-31 11:20
  • 阅读:51049

当 uni-app 遇见 vscode

分类:uni-app

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。

不过,由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode,不想更换编辑器。直接使用 vscode 开发 uni-app,其体验并不是很好。

其实 uni-app 和 vscode 也可以很搭,接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。

CLI 工程

全局安装 vue-cli 3.x(如已安装请跳过此步骤)

npm install -g @vue/cli

通过 CLI 创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project

此时,会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板,如下所示:

在vscode中打开项目

安装vue语法提示插件vetur

CLI 工程默认带了uni-app语法提示和5+App语法提示

安装组件语法提示

组件语法提示是uni-app的亮点,其他框架很少能提供。

npm i @dcloudio/uni-helper-json

导入 HBuilderX 自带的代码块

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

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可取值如下:

平台
h5 H5
mp-alipay 支付宝小程序
mp-baidu 百度小程序
mp-weixin 微信小程序
mp-toutiao 头条小程序
mp-qq qq 小程序

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示,在 vscode 中编辑的时候,可以自行安装

初始化npm(如已初始化跳过此步骤)

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外,uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件,vscode一样可以使用。

  • 如果这些插件有npm使用方式(如uni-ui),可以用npm
  • 如果作者没提供npm方式,那么下载zip包解压也是可以用的
20 关注 分享
2792310853@qq.com 今天回复我了吗 赖耀耀 yp 唧唧复唧唧 chxjfreedom@qq.com 371048998@qq.com 麦当屋 369364796@qq.com double_limi 545945110@qq.com sa123456@qq.com wangzishen@hnu.edu.cn xhs 923033576@qq.com 2523090520@qq.com kaifeizhou@outlook.com ken9924 Dodu xiaoyueliang

要回复文章请先登录注册

xiaoyueliang

xiaoyueliang

111
2021-03-31 11:20
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 HZH8997 :
墙了,看文档
2021-03-31 11:07
HZH8997

HZH8997

回复 DCloud_UNI_GSQ :
但是创建新项目 一直卡在 Fetching remote preset dcloudio/uni-preset-vue...
2021-03-30 22:33
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 HZH8997 :
2021-03-30 10:50
HZH8997

HZH8997

请问楼主 m1 mac能用吗
2021-03-29 23:10
wenxu051@163.com

wenxu051@163.com

回复 yuton.yao@qq.com :
小程序开发者工具都不知道linux,如果各家小程序直接linux开发,我想Hbuilder一定会及时跟进的
2021-03-19 09:50
yuton.yao@qq.com

yuton.yao@qq.com

鉴于目前国际形势,目前有一部分用户已经开始转战linux操作系统,未来说不定会有更多的开发者使用linux开发,而且需求墙linux版本的需求也是很强烈,不知官方何时会考虑linux版本的开发?
2020-09-09 16:57
DCloud_heavensoft

DCloud_heavensoft

回复 神的尾巴 :
那只能用hx
2020-08-23 09:36
神的尾巴

神的尾巴

APP相关要如何配置到VSCode呢?比如制作调试基座、云打包等
2020-08-23 03:57
毛学生

毛学生

所以jsonc是什么,怎么解决json报错
2020-08-03 14:40