DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-08-21 14:21
  • 更新:2024-03-16 01:26
  • 阅读:65117

在 WebStorm 中开发 uni-app

分类: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 项目模板,如下所示:

<div> <img src="http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/h5-cli-01.png" width="300"> </div>

在 WebStorm 中打开项目

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

运行项目

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 语法提示,在 WebStorm 中编辑的时候,可以自行安装

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

npm init -y

安装 uni-app 语法提示

npm i @dcloudio/types -D

注意

webstorm不识别rpx等单位

如果想了解HBuilderX为uni-app做了什么更好的优化,参考:https://ask.dcloud.net.cn/article/35451

5 关注 分享
9***@qq.com C1oudust 小飞侠108 tuonioooo DCloud_UNI_HRK

要回复文章请先登录注册

君惜

君惜

回复 君惜 :
.idea
2020-05-06 14:56
君惜

君惜

回复 君惜 :
安装 @types/html5plus 和 @types/uni-app,删掉webstorm中的.ideq文件夹,用webstorm重新打开项目即可。
2020-05-06 14:55
君惜

君惜

webstorm @/vue-cli 4.3.0 ,uniapp没有提示,怎么解决啊?
2020-05-06 14:23
1***@qq.com

1***@qq.com

webstorm不支持nvue语法,很尴尬!
2020-04-30 23:59
8t7oQfT

8t7oQfT

这篇文章也不错
http://blog.leanote.com/post/xianglijiaxing/迁移至WebStorm
2020-04-21 16:34
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 8***@qq.com :
转成cli的,看我文章
2020-04-02 17:57
8***@qq.com

8***@qq.com

1.uni-app 没有package.json 如何导入webstrom 呀?
2.就是如何生成webstrom能运行的uni-app。
3.新创建项目的项目是可以在webstrom运行的
2020-04-02 15:05
流浪的小灰灰

流浪的小灰灰

cli创建的uni项目,eslint 该怎么配置了
2020-03-15 05:04
2***@qq.com

2***@qq.com

请问 app 可以测试吗
2020-02-28 12:33
5***@qq.com

5***@qq.com

upx rpx 格式化会出现空格 解决方案参考 https://www.jianshu.com/p/327d885df38a
2020-02-28 12:05