DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-08-21 14:21
  • 更新:2025-03-03 11:47
  • 阅读:73259

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

在 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 HRK_01

要回复文章请先登录注册

h***@outlook.com

h***@outlook.com

您好,按照此文配置的项目,目前遇到这些问题:
1.由于@vue/cli依赖node版本较高,而在HBuilder X内最终编译时,使用的是HBuilder X自带的node-8.10.0,导致编译时node-sass调用失败,需要手动指向本机node才能走通。
2.直接使用vue create -p dcloudio/uni-preset-vue my-project 创建的项目,在Hbuilder X中,运行到安卓真机,编译时报错。
```
15:39:02.496 项目 'cssp-app-entp-uniapp' 开始编译...
15:39:03.315 编译器版本:2.7.9(v3)详见:https://ask.dcloud.net.cn/article/36599。
15:39:03.345 请注意运行模式下,因日志输出、sourcemap以及未压缩源码等原因,性能和包体积,均不及发行模式。
15:39:03.346 正在编译中...
15:39:08.077 DONE Build complete. Watching for changes...
15:39:08.099 项目 'cssp-app-entp-uniapp' 编译成功。
15:39:08.408 正在建立手机连接...
15:39:08.609 手机端调试基座版本号为2.7.9,版本号相同,跳过基座更新
15:39:08.741 正在同步手机端程序文件...
15:39:09.027 同步手机端程序文件完成
15:39:09.161 正在启动HBuilder调试基座...
15:39:10.271 应用【和田畜牧企业端】已启动...
15:39:10.318 reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Exception: SyntaxError: Unexpected token '...'. Expected a property name.
15:39:10.342 at weex createInstanceContext:2689
15:39:10.390 getTemplateInfo== template md5 65092aa987e6362143213d6f3fe112d7 length 589739 base64 md5 ZQkqqYfmNiFDIT1vP+ES1w== response header {"templateSourceBase64MD5":["ZQkqqYfmNiFDIT1vP+ES1w=="],"templateSourceMD5":["65092aa987e6362143213d6f3fe112d7"]}
```
2020-06-09 15:39
西门吹雪雪

西门吹雪雪

414141
2020-05-22 20:34
君惜

君惜

回复 君惜 :
.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