uniapp 项目实践总结(二)从零开始搭建一个项目

导语：本篇文章主要是项目方面的技术开发总结，新建一个项目可以选择使用可视化界面，也可以使用命令行搭建。

目录

• 可视化界面
• 命令行搭建
• 安卓开发环境
• 苹果开发环境

可视化界面

安装软件

使用官方推荐的 HbuilderX 软件，开发方式比较简单，内置相关环境以及终端，无需配置 node。

• 下载地址: hbuilderx；

新建项目

• 打开软件找到文件》新建》项目，选择 uni-app 项目，默认模板就可以；
• 填写项目名称和存储路径，点击右下角创建按钮，这样项目就创建成功了；

运行项目

在项目根目录下面，选择顶部导航运行。

• 运行到游览器：点击运行到游览器，可以选择内置游览器，也可以外部游览器，外部游览器需要设置好游览器安装路径。

• 运行到小程序：选择需要的小程序，配置小程序开发者工具路径，点击运行到指定的小程序开发工具或指定页面。

• 运行到 app:

  • 运行到安卓，下载安卓开发编辑器或使用真机，选择运行到安卓基座或指定页面；
  • 运行到 ios，下载苹果 xcode 编辑器或使用真机，选择运行到 ios 基座或指定页面；

发行项目

在项目根目录下面，选择顶部导航发行。

发布到网站

PC、Web 或手机 H5：填写网站名称和域名以及可选项，点击发行。

发布到小程序

选择需要的小程序，填写小程序名称和小程序 AppId 以及可选项，点击发行。

发布到 app

方式有云打包或者本地打包。

• 云打包：安卓签名证书生成指南，ios 签名证书生成指南

• 本地打包：安卓本地打包教程，iOS 本地打包教程

命令行搭建

环境安装

• 安装 node 环境
• 全局安装 vue-cli

npm install -g @vue/cli

创建项目

创建 uni-app 项目

• 使用 vue 脚手架

#使用正式版（对应 HBuilderX 最新正式版）
vue create -p dcloudio/uni-preset-vue my-project

#使用 alpha 版（对应 HBuilderX 最新 alpha 版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

• 使用 Vue3/Vite 版

node 版本^14.18.0 || >=16.0.0。

#使用正式版（对应 HBuilderX 最新正式版）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

#使用 alpha 版（对应 HBuilderX 最新 alpha 版）
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

# 创建以 typescript 开发的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

• 更新依赖版本

# 更新到最新正式版
npx @dcloudio/uvm

# 更新到最新 Alpha 版
npx @dcloudio/uvm alpha

运行 uniapp 项目

npm run dev:%PLATFORM%

发布 uniapp 项目

npm run build:%PLATFORM%

tips: %PLATFORM% 可取值如下：

安卓开发环境安装

下面讲解配置安卓开发环境，包括 Java 安装，Android Studio 安装。

安装 Java 环境

JavaSDK8 下载官网：https://www.oracle.com/cn/java/technologies/javase/javase8u211-later-archive-downloads.html

• 下载软件；
• 安装软件；
• 配置环境变量；

在系统变量 Path 里面加入D:\java\jre1.8\bin;

• 查看版本

C:\Users\Administrator>java -version
java version "1.8.0_261"
Java(TM) SE Runtime Environment (build 1.8.0_261-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.261-b12, mixed mode)

下载 Android Studio

• 打开软件官网：https://developer.android.google.cn/studio
• 安装软件包，点击下一步下一步就行；

tips:下载过程中会遇到网络问题，建议配置以下 hosts 文件如下。

# google download
203.208.41.65 dl.google.com
220.181.174.161  dl.google.com
203.208.40.33  dl.google.com

优化系统盘占用

• 从系统盘移动到其他盘，主要是 c 盘下的.android和.gradle文件夹下的内容；
• 在其他盘新建一个文件夹AndroidConfig,移动上面两个文件夹到新的文件夹，
• 找到.android/adv/Pixel_4_API_29.ini配置文件，更改 path 到你新的文件夹路径；
• 找到安卓编辑器安装目录下的bin文件夹，打开idea.properties文件，并在最后一行添加：

gradle.user.home=D:/AndroidConfig/.gradle

查看打印版本

• 查看 adb 版本

D:\AndroidSdk\platform-tools>adb version
Android Debug Bridge version 1.0.41
Version 34.0.0-9570255
Installed as D:\AndroidSdk\platform-tools\adb.exe

• 查看 emulator 版本

D:\AndroidSdk\emulator>emulator -version
INFO    | Android emulator version 32.1.11.0 (build_id 9536276) (CL:N/A)
INFO    | Storing crashdata in: C:\Users\ADMINI~1\AppData\Local\Temp\\AndroidEmulator\emu-crash.db, detection is enabled
INFO    | Duplicate loglines will be removed, if you wish to see each indiviudal line launch with the -log-nofilter flag.
Android emulator version 32.1.11.0 (build_id 9536276) (CL:N/A)
Copyright (C) 2006-2017 The Android Open Source Project and many others.
This program is a derivative of the QEMU CPU emulator (www.qemu.org).

  This software is licensed under the terms of the GNU General Public
  License version 2, as published by the Free Software Foundation, and
  may be copied, distributed, and modified under those terms.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

查看软件界面

到此安卓开发环境就安装配置完毕。

苹果 MAC 开发环境安装

需要准备一台安装有 Mac 系统的电脑。

xcode 下载

Xcode 软件官网

下载模拟器

Xcode 内下载

• 打开 xcode，点击导航 Preference，进入 Downloads 面板；
• 打开 Components；
• 选择对应的模拟器下载；

手动下载

下载失败可以点击以下链接：

• ios 8.1
• ios 8.2
• ios 8.3
• ios 8.4
• ios 9.0
• ios9.1
• ios 9.2
• ios 9.3
• ios 10.0
• ios10.1
• ios10.2
• ios10.3
• ios11.0
• ios11.1
• ios11.2
• ios11.3
• ios11.4
• ios12.0
• ios12.1

下载完成后执行以下步骤：

• 下载完成后进入/Users/#{Username}/Library/Caches;
• 找到com.apple.dt.Xcode右键选择Show Packages Contents;
• 进入 Downloads 目录，没有就手动创建一个；
• 将下载好的移入Downloads目录；
• 重启 Xcode

到这里苹果的开发环境就安装完毕。

预览软件界面

好了，以上就是 uniapp 的新项目搭建全过程。