使用uni-app框架开发各种web前端程序

使用uni-app框架开发各种web前端程序是目前非常流程的开发方式，比如开发APP、小程序、H5等等，是一个使用 vue 开发所有前端应用的框架，开发者编写一套代码，可发布到ios，安卓、H5、以及各种小程序（微信、支付宝等等...）多个平台。两种搭建uni-app项目的方法，通过 HBuilderX 可视化界面；也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app项目。今天我们主要分享一下第一种方法：

1、安装HBuilderX

HbuilderX内置相关环境，开箱即用，无需配置node.js；开发者需要先下载工具 HbuilderX

官网下载地址

解压安装：安装比较简单

安装流程

或者参考

参考安装文章

核心创建页面：

注意每个模块的作和应用场景如下：

1）默认模板

业务含义：一个简单的空白模板，适合快速启动和测试 uni-app 项目。
适用场景：适合熟悉 uni-app 的用户，手动添加所需组件及代码，快速构建最小化项目。

2）Hello uni-app x

业务含义：展示 uni-app x 框架的组件、接口和模板，帮助开发者快速上手。
适用场景：适合新手开发者，或希望查看 uni-app 具体组件和接口用法的用户，尤其适合学习或小规模实验。

3）Hello uvue

业务含义：基于 uvue 的 Vue 语法示例，展示如何在 uni-app 中使用 Vue 框架。
适用场景：适用于熟悉 Vue 的开发者，想利用 Vue 的语法优势来开发应用的情况。

4）Hello uni-app

业务含义：基本 uni-app 框架的示例，展示基础组件和 API 使用。
适用场景：适合初学者，学习 uni-app 的基础结构、组件和常用 API，适合简单的入门项目或演示应用。

5）Hello unicoud

业务含义：展示 uniCloud 后端服务的示例，结合前后端一体化开发。
适用场景：适合需要使用 uniCloud 云函数、数据库等后端服务的项目，比如社交应用、小程序后端服务等。

6）Hello uts

业务含义：展示 UTS（uni-app TypeScript）的示例，适合使用 TypeScript 开发的项目。
适用场景：适合希望利用 TypeScript 语法开发 uni-app 项目的情况，比如较为复杂或有严格类型检查需求的项目。

7）uni-starter

业务含义：云端一体化开发的基础项目模板，集成了登录注册等基础功能。
适用场景：适合快速启动需要用户登录注册的项目，如电商、社交应用等。为 uni-app 云开发（uniCloud）项目提供基本框架。

8）uni-admin

业务含义：admin 管理系统模板，集成了后台管理系统的常见功能。
适用场景：适用于开发管理后台、内容管理系统等，尤其是需要权限控制、数据展示等功能的系统管理项目。

9）uni-ui 项目

业务含义：基于 uni-ui 组件库，提供了一些常见的 UI 组件。
适用场景：适合对 UI 有要求的项目，帮助开发者快速构建应用界面，适合移动端项目，比如工具类、社交类应用。

10）Hello i18n

业务含义：提供国际化（i18n）支持的 uni-app 模板，展示如何实现多语言切换。
适用场景：适合有多语言需求的应用，比如国际版应用、跨国电商等。

2、安装tortoisegit 与 git

下载：tortoisegit 官网下载

HBuilderX安装Git插件
点击菜单【工具】-->【插件安装】，显示下面,然后，安装Git插件或者其他插件

参考文章如下

参考安装文章

3、试运行

鼠标点击项目，未登录状态也行。

选择运行

结果启动成功后默认弹出

4、打包成web或H5

点击后展示

点击发行，这里需要登录状态；

注册登录后自动打包

打包后的目录

这个包理论上就可以放到服务器上运行了。

5、npm下载第三方包

首先确保项目中有一个package.json文件，该文件包含了项目的依赖信息。如果项目中没有package.json文件，可以通过运行 npm init 命令来创建一个。点击终端：

首次点击可能显示

安装成功后显示

然后输入 npm init 命令初始化创建

创建成功后内容如下

之后就可以引入包了，比如执行：

npm install axios@^1.6.8 --save

或者

npm install axios@^1.6.8 vant@^2.13.2 --save

卸载引入

npm uninstall ol

另外也可以先在 json文件里写上需要引入的包，然后执行 npm install ;如下所示：

  "dependencies": {
    "core-js": "^3.8.3",
    "axios": "^1.6.8"
  },

6、官网文档、后台登录及插件参考总概

官网入口

后台登录展示

7、首次拉取代码转换成uni-app

点击项目右击后选择

隐藏、搜索、属性查看git代码地址等等都可以找到。

8、vue项目转换uni-app 项目

可以先用HBuilderX创建一个默认的uni-app项目，然后把原来vue项目里面的文件复制过来，多测试验证，很快就好了。具体步骤：

1、将Vue项目转换成uni-app项目通常涉及以下步骤：

2、安装DCloud的uni-app开发工具HBuilderX。

3、在HBuilderX中创建新的uni-app项目。

4、将Vue项目的源码复制到新的uni-app项目中，并对不兼容的部分进行修改。

5、调整项目配置文件（如vue.config.js和manifest.json）以解决兼容性问题。

6、测试并调整应用的UI和功能，确保其正常运行。

由于Vue项目和uni-app项目在结构和API上有显著差异，因此并没有一种自动化的方式可以直接转换项目。需要开发者手动修改和重构代码。

9、默认版首次导入安装模块

打开 HBuilderX 的插件市场，搜索你想要的模块；