全部产品
Search
文档中心

SuperApp:使用脚手架

更新时间:Nov 21, 2024

本文介绍如何使用uni-app脚手架。

通过Gitlab下载脚手架

  1. 前往Gitlab下载EMAS提供的uni-app脚手架

  2. 前往官方IDE下载地址下载HBuilderX,并安装

  3. HBuilderX中,单击工具栏的文件 > 导入 > 从本地目录导入,打开EMAS提供的uni-app脚手架工程。

    重要

    uni-app脚手架须使用EMAS提供的脚手架。使用uni-app官方脚手架,修改appid后会导致打包构建失败。

    image

  4. 接入EMAS。

    在HBuilderX中单击manifest.json,在右侧窗口中选择源码视图appid配置为创建应用中获取到的应用ID。

    image

通过vue-cli命令行使用脚手架

  1. 安装环境。全局安装vue-cli,推荐使用vue-cli 4.x。

    npm install -g @vue/cli@4
    说明

    vue-cli 5.x / Webpack 5的支持情况,请参见 support webpack5 #3723

  2. 下载uni-app官方脚手架,创建uni-app工程。

    说明

    下载脚手架过程中,如果提示Node版本不匹配,请根据系统提示更新Node版本。

    • 使用正式版。

      vue create -p dcloudio/uni-preset-vue my-project
    • 使用alpha版。

      vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
    • 使用Vue3/Vite版。

      • 创建以javascript开发的工程(如命令行创建失败,请直接访问gitee下载模板)。

        npx degit dcloudio/uni-preset-vue#vite my-vue3-project
      • 创建以typescript开发的工程(如命令行创建失败,请直接访问gitee下载模板)。

        npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

      此时,会提示选择项目模板(使用Vue3/Vite版不会提示,目前支持创建默认模板),初次体验建议选择hello uni-app项目模板,如下图所示:

      h5-cli-01

  3. 自定义模板。

    选择自定义模板时,需要填写uni-app模板地址,这个地址是托管在云端的仓库地址。更多支持的下载方式,请参考插件说明:download-git-repo

    由于网络原因,存在模板下载失败的情况,若失败请参见常见问题处理。

  4. 接入EMAS。

    • 如果使用VSCode或Sublime等其他编辑器打开小程序工程,可以直接打开manifest.json修改appid,即appid配置为创建应用中获取到的应用ID。

    • 如果使用HBuilderX打开小程序工程,需在HBuilderX中单击manifest.json文件,在右侧窗口中选择源码视图appid配置为创建应用中获取到的应用ID。

      image