DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-08-16 15:32
  • 更新:2024-09-27 14:19
  • 阅读:124026

当 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包解压也是可以用的
28 关注 分享
2***@qq.com 今天回复我了吗 赖耀耀 yp 唧唧复唧唧 c***@qq.com 3***@qq.com 麦当屋 3***@qq.com double_limi 5***@qq.com s***@qq.com w***@hnu.edu.cn xhs 9***@qq.com 2***@qq.com k***@outlook.com ken9924 Dodu xiaoyueliang chihiro1013 1***@qq.com kouis Mr丶阿萌 g***@88.com 1***@qq.com z***@yushiset.com 9***@qq.com

要回复文章请先登录注册

杨杨得亿

杨杨得亿

回复 1***@qq.com :
npm run build:h5
2024-09-27 14:19
1***@qq.com

1***@qq.com

回复 w***@163.com :
uni-app 开发的小程序,怎么命令行打包成h5啊
2024-09-27 10:58
w***@163.com

w***@163.com

回复 c***@foxmail.com :
谁说不可以CI/CD,我用uni-app做的项目可以gitlab CI/CD 自动化打包并发布 H5,Android,iOS,微信小程序,头条小程序
2024-05-08 18:02
4***@qq.com

4***@qq.com

一个让人不喜欢的工具,但是却让国内老板都喜欢的工具,自从有了uniapp,国内小老板都觉得可以开发一个app到处都可以发布了,但是苦了开发,各种代码块,跟小老板说不通,hbuilderx开发体验更是一塌糊涂
2023-12-14 15:56
c***@foxmail.com

c***@foxmail.com

回复 6***@qq.com :
hbuilder 很好,但是 不支持ci/cd 最大的问题,比如说不能在 gitlab 里面配置流水线,也没法在jenkins 里面配置流水线,更不用说其它的环境了
2023-10-27 10:18
4***@qq.com

4***@qq.com

对于习惯src引入,习惯图形界面的我来说,hbuilder就是最好的选择,不习惯cli脚手架通过cmd命令行方式。
是不是说明我不是一名专业的程序员呢。
2023-09-05 12:48
1***@qq.com

1***@qq.com

回复 6***@qq.com :
赞同
2023-08-10 11:11
d***@yeah.net

d***@yeah.net

```
{
"name": "Aidex",
"version": "2.3.0",
"description": "Aidex 移动端快速开发框架",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://gitee.com/aidex/aidex-uniapp.git"
},
"keywords": [
"Aidex",
"快速开发平台"
],
"author": "aidex",
"license": "MIT",
"bugs": {
"url": "https://github.com/aidex/aidex-uniapp/issues"
},
"homepage": "https://github.com/aidex/aidex-uniapp#readme",
"dependencies": {
"@icon-park/vue": "^1.3.5",
"dayjs": "^1.11.7",
"vue-i18n": "^8.20.0"
}
}
```
我的package.json都没有那些weixin app的命令,这种项目需要怎么改呢?
2023-08-09 17:34
6***@qq.com

6***@qq.com

HBuilderX真的有很好的开发体验吗,并不觉得
2023-05-26 17:32
微查宝

微查宝

挂一个链接吧,eslint支持.nvue文件,需要使用volar支持 https://github.com/uni-helper/vitesse-uni-app/issues/8
2023-05-06 16:38