【uni-app系列】uni-app之快速搭建框架

---

一、uni-app 是什么？

uni-app 由 DCloud 公司开发，是一个使用 Vue.js 开发所有前端应用的框架，开发者只需编写一套代码，即可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。即使不跨端，uni-app 也是更好的小程序开发框架、更好的 App 跨平台框架、更方便的 H5 开发框架。

二、为什么选择 uni-app ？

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。以下截图来源于 uni-app 官网：

三、功能框架

四、准备工作

uni-app支持通过可视化界面、vue-cli 命令行 (opens new window) 两种方式快速创建项目。

可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置 nodejs。

本文使用可视化界面的方式搭建框架。开始之前，需先下载 HBuilderX ，官方下载地址：https://www.dcloud.io/hbuilderx.html

推荐下载 App 开发版，可开箱即用；如下载标准版，在运行或发行 uni-app 时，会提示安装uni-app插件，插件下载完成后方可使用。

五、搭建框架

1.创建项目

点击“文件” -> “新建” -> “项目”：

输入项目名称，选择 “uni-ui项目” 模板，点击【创建】：

2.运行项目

uni-app 支持多种运行项目的方式，包括运行到浏览器、内置浏览器运行、运行到手机或模拟器、运行到小程序模拟器、运行到终端等。

（1）运行到浏览器

运行效果如下：

（2）内置浏览器运行

运行效果如下：

（3）运行到手机或模拟器

该方式需要安装微信开发者工具：

在手机上的运行效果如下：

（4）运行到小程序模拟器

运行效果如下：

运行时可能会报如下错误：

 [微信小程序开发者工具] ? Enable IDE Service (y/N)

解决方法：
进入微信开发者工具，点击 “设置” 按钮，在弹出的窗口选择 “安全” 选项，打开 “服务端口”：

（5）运行到终端

运行到终端需要在项目下生成 package.json 文件，在项目根目录下执行以下命令生成 package.json 文件：

npm init -y

生成 package.json 文件后，再次打开运行到终端：

3.发布项目

（1）打包为原生App

出现以下界面，输入相关信息，点击【打包】：

（2）发行为微信小程序

输入微信小程序AppId，点击【发行】：

（3）发行为 H5

输入网站标题、网站域名，点击【发行】：