All Products
Search
Document Center

SuperApp:Use scaffolding to develop miniapps

Last Updated:Dec 20, 2024

This topic describes how to use a uni-app scaffold.

Use GitLab to download the scaffolding

  1. Download the uni-app scaffold provided by Enterprise Mobile Application Studio (EMAS) in GitLab.

  2. Download HBuilderX from the HBuilderX download page and install HBuilderX.

  3. Start HBuilderX, and choose File > Import > Import from Local Directory... from the menu bar. Select the uni-app scaffold to open it in HBuilderX.

    Important

    You must use the uni-app scaffold provided by EMAS. If you use the official uni-app scaffold, a failure occurs when you package and build the uni-app miniapp after you specify the app ID.

    image

  4. Connect the uni-app project to EMAS.

    In HBuilderX, click the manifest.json file. In the right-side window, select Source View. In the code section, set appid to the ID of the app that you created. For more information, see Create an app.

    2

Use VUE CLI to work with the scaffolding

  1. Install the environment. Install the Vue CLI tool in global mode. We recommend that you use Vue CLI V4.x.

    npm install -g @vue/cli@4
    Note

    For information about Vue CLI V5.x and its support for Webpack 5, see support webpack5 #3723.

  2. Download the official uni-app scaffold and use it to create a uni-app project.

    Note

    When you download the scaffold, if a message which indicates that the Node.js version does not match, update the Node.js.

    • Official version

      vue create -p dcloudio/uni-preset-vue my-project
    • Alpha

      vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
    • Vue3/Vite

      • To create a JavaScript project, run the following command. If the command fails to create the project, download the template from gitee.

        npx degit dcloudio/uni-preset-vue#vite my-vue3-project
      • To create a TypeScript project, run the following command. If the command fails to create the project, download the template from gitee.

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

      Select a template when prompted. This does not apply to Vue3/Vite uni-app projects, which support only the default template. We recommend that you select hello uni-app when you create your first uni-app project.

      h5-cli-01

  3. Configure a custom template.

    If you select a custom template, you are required to specify the location of the template. The location is the URL of the repository that hosts the template. For information about how to download the repository, see download-git-repo.

    You may fail to download a template due to network errors. For information about how to troubleshoot template download failures, see "Failure to download the template when un-app is integrated" of the FAQ.

  4. Connect the uni-app project to EMAS.

    • If you use other editors such as Visual Studio Code or Sublime Text to open the project, you can directly open the manifest.json file and set appid to the ID of the app that you created. For more information, see Create an app.

    • If you use HBuilderX to open the project, you must click the manifest.json file, select Source View in the right-side window, and then set appid to the ID of the app that you created. For more information, see Create an app.

    • 2