环境安装

全局安装vue-cli

  1. npm install -g @vue/cli

创建uni-app

使用正式版（对应HBuilderX最新正式版）

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

使用alpha版（对应HBuilderX最新alpha版）

  1. vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，如下所示：
2. 通过vue-cli命令行 - 图1

自定义模板

选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。
更多支持的下载方式，请参考这个插件的说明：download-git-repo

修改依赖为指定版本

  1. 查看 HBuilderX 对应的 NPM 依赖版本: 打开 NPM版本记录，版本号 2.0.0- 后面是与 HBuilderX 对应的版本号且小版本不会超过9，比如 HBuilderX 2.7.5.20200518 对应的版本号 2.0.0-27520200518001，2.0.0-271420200618 对应的为 2.0.0-27920200618002。
  2. 批量修改 package.json 中 uni 相关依赖为指定的版本号（去掉版本号前面 ^）。
  3. 对于有变化的依赖进行增删，提示不存指定版本的依赖可以保留原始版本或者删除，运行时提示缺少的依赖自行安装。

运行、发布uni-app

  1. npm run dev:%PLATFORM%
  2. npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值 平台
app-plus app平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作）
h5 H5
mp-alipay 支付宝小程序
mp-baidu 百度小程序
mp-weixin 微信小程序
mp-toutiao 字节跳动小程序
mp-qq qq 小程序
mp-360 360 小程序
quickapp-webview 快应用(webview)
quickapp-webview-union 快应用联盟
quickapp-webview-huawei 快应用华为

可以自定义更多条件编译平台，比如钉钉小程序，参考package.json文档。

运行并发布快应用

快应用有两种开发方式，uni-app均支持：

  • 类小程序webview渲染方式：https://ask.dcloud.net.cn/article/37182

  • 原生渲染方式：https://ask.dcloud.net.cn/article/37145

    运行并发布快应用(webview)

    HBuilderX 2.7.12+ 版支持

    运行并发布快应用(webview)-华为

    HBuilderX 2.7.10+ 版支持
    华为快应用文档-小程序转快应用 https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-filestructure
    其他：

  • 目前使用npm run build:app-plus会在/dist/build/app-plus下生成app打包资源。如需制作wgt包，将app-plus中的文件压缩成zip（注意：不要包含app-plus目录），再重命名为${appid}.wgt， appid为manifest.json文件中的appid。

  • dev 模式编译出的各平台代码存放于根目录下的 /dist/dev/目录，打开各平台开发工具选择对应平台目录即可进行预览（h5 平台不会在此目录，存在于缓存中）；
  • build 模式编译出的各平台代码存放于根目录下的 /dist/build/ 目录，发布时选择此目录进行发布；
  • dev 和 build 模式的区别：
    1. dev 模式有 SourceMap 可以方便的进行断点调试；
    2. build 模式会将代码进行压缩，体积更小更适合发布为正式版应用；
    3. 进行 环境判断 时，dev 模式 process.env.NODE_ENV 的值为 development，build 模式 process.env.NODE_ENV 的值为 production。