快速上手

本文將幫助您快速建立並執行一個 uni-app 專案，體驗 uni-app 的開發流程。

環境準備

在開始之前，請確保您的開發環境已經安裝了以下工具：

• Node.js (>= 14.0.0)
• 套件管理工具：npm（Node.js 自帶）或 yarn
• 編輯器：推薦使用 HBuilderX（官方IDE，內建相關環境）或 VS Code

建立專案

方式一：使用 HBuilderX 可視化介面建立（推薦新手）

1. 下載並安裝 HBuilderX
2. 開啟 HBuilderX，點選頂部選單列的 檔案 -> 新建 -> 專案
3. 在彈出的視窗中選擇 uni-app，填寫專案名稱，選擇預設模板
4. 點選 建立 按鈕完成專案建立

方式二：使用命令列建立（適合有經驗的開發者）

1. 全域安裝 Vue CLI（如果已安裝可跳過）

npm install -g @vue/cli

2. 安裝 uni-app 模板

npm install -g @dcloudio/vue-cli-plugin-uni

3. 建立 uni-app 專案

# 建立預設模板專案
vue create -p dcloudio/uni-preset-vue my-project

# 或者使用互動式命令選擇模板
vue create --preset dcloudio/uni-preset-vue my-project

專案結構

建立完成後，您將看到以下目錄結構：

my-project/
├── pages/           # 頁面目錄
│   ├── index/       # 首頁
│   └── logs/        # 日誌頁
├── static/          # 靜態資源
├── App.vue          # 應用配置
├── main.js          # 入口檔案
├── manifest.json    # 應用配置清單
├── pages.json       # 頁面路由配置
└── package.json     # 專案依賴配置

開發除錯

執行專案

在 HBuilderX 中執行

1. 開啟專案
2. 點選工具列上的執行按鈕
3. 選擇目標平台（瀏覽器、小程式、App等）
4. 等待編譯完成，檢視執行結果

使用命令列執行

# 進入專案目錄
cd my-project

# 安裝依賴
npm install

# 啟動開發伺服器
npm run dev:%PLATFORM%

# 例如：啟動H5開發伺服器
npm run dev:h5

支援的平台

平台	命令	說明
H5	npm run dev:h5	網頁端開發
微信小程式	npm run dev:mp-weixin	微信小程式開發
App	npm run dev:app	移動應用開發
支付寶小程式	npm run dev:mp-alipay	支付寶小程式開發

第一個頁面

讓我們建立一個簡單的歡迎頁面：

1. 修改首頁

開啟 pages/index/index.vue 檔案：

<template>
  <view class="container">
    <text class="title">歡迎使用 uni-app！</text>
    <text class="subtitle">這是一個跨平台應用開發框架</text>
    <button @click="handleClick" class="btn">點選我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app!'
    }
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '您點選了按鈕！',
        icon: 'success'
      })
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 40rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 60rpx;
  text-align: center;
}

.btn {
  background-color: #007AFF;
  color: white;
  padding: 24rpx 48rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
}
</style>

2. 檢視效果

儲存檔案後，在瀏覽器中檢視效果：

• 標題文字："歡迎使用 uni-app！"
• 副標題文字："這是一個跨平台應用開發框架"
• 藍色按鈕：點選後顯示成功提示

打包發佈

打包命令

# 打包H5版本
npm run build:h5

# 打包微信小程式
npm run build:mp-weixin

# 打包App
npm run build:app

發佈流程

1. 測試：在不同平台測試應用功能
2. 最佳化：最佳化效能和體驗
3. 打包：使用對應命令打包
4. 上架：上傳到對應平台商店

下一步

恭喜您完成了第一個 uni-app 專案！接下來可以：

• 學習專案結構 - 深入瞭解uni-app專案組織
• 檢視元件教程 - 學習各種元件的使用方法
• 瀏覽實戰案例 - 透過實際案例學習開發技巧
• 檢視常見問題 - 解決開發過程中遇到的問題

常見問題

Q: 執行時出現錯誤怎麼辦？

A: 檢查以下幾點：

• Node.js 版本是否符合要求
• 依賴是否正確安裝
• 網路連線是否正常
• 檢視錯誤日誌獲取詳細資訊

Q: 如何除錯應用？

A: 可以使用以下方法：

• 瀏覽器開發者工具
• HBuilderX 的除錯功能
• 小程式開發者工具
• 真機除錯

Q: 支援哪些平台？

A: uni-app 支援 iOS、Android、H5、微信小程式、支付寶小程式、百度小程式、頭條小程式、QQ小程式、快手小程式、釘釘小程式、淘寶小程式、快應用等平台。

---

開始您的 uni-app 開發之旅吧！