万能前端框架uni app初探01:搭建开发环境

前言：

从本节开始，我来带领大家学习uni app,这是一款逆天的前端框架，基于vue.js，同一套代码，可发布到iOS、Android、H5、以及各种小程序等多个平台，本节，我们部署在微信小程序和Android上面，体验下这款强大的前端框架。

一、基础知识

1.uni app简介

?uni-app? 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

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

2.安装HBuilder X工具

下载HBuilder X工具，地址：https://www.dcloud.io/hbuilderx.html

本文使用的是开发版本。

二、搭建步骤

1.创建项目

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

选择uni-app，并且模板选择uni-ui项目，然后点击创建

2.运行到Web端

运行到浏览器

浏览器效果如下

3.运行到Android

首先需要打开手机开发者选项，并且开启USB调试

点击运行->运行到手机或模拟器，选择连接到的手机设备

编译安装过程如下

手机状态如下：

安装后界面如下：

4.运行到微信小程序

点击运行->运行小程序模拟器

指定微信开发者工具路径

出现错误，按照提示应该打开微信开发者工具，进行配置即可

点击微信IDE菜单栏下安全设置

开启服务端口

重新运行，可以看到小程序端已经正式运行起来了

寄语：读万卷书，行万里路！