全部產品
Search
文件中心

SuperApp:使用腳手架

更新時間:Nov 22, 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