如何学习uni-app？从创建一个uni-app开始
一、什么是uni-app？
正如它的标语表达的：开发一次，多端覆盖！
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 ---uni-app官方
二、如何学习uni-app?
第一步：打开官方文档：https://uniapp.dcloud.io/
第二步：文档写的太多，不知道从何下手，这时其他的先不管，先根据以下步骤把uni-app创建出来，分别通过两种方法创建uni-app，并运行出H5端跟微信小程序端
1、方法一：通过 HBuilderX 可视化界面创建uni-app项目
1）安装HBuilderX：官方IDE下载地址
2）在点击工具栏里的文件 -> 新建 -> 项目
3）选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
4）浏览器运行：进入uni-app-dome项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。
2、方法二：通过vue-cli命令行创建uni-app项目
# 全局安装 vue-cli
$ npm install -g @vue/cli
# 创建uni-app项目，初次体验建议选择 hello uni-app 项目模板
$ vue create -p dcloudio/uni-preset-vue my-project
# 进入项目目录
$ cd my-project
# 运行到微信小程序，调试模式
$ npm run dev:mp-weixin
三、创建uni-app详细步骤如下：
1、通过 HBuilderX 可视化界面创建uni-app项目
1）安装HBuilderX：官方IDE下载地址 （注：所有安装的工具都不要放入C盘，记得安装时修改安装路径，因为默认为C盘。）
2）在点击工具栏里的文件 -> 新建 -> 项目：
01-新建项目
3）选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
02-创建项目
4）浏览器运行：进入uni-app-dome项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。
03-运行项目
5)浏览器运行后，会在浏览器中直接打开创建好的H5项目，记得把浏览器设置为移动端模式，选择合适的机型进行页面展示，到此你已经学会了HBuilderX 可视化界面创建uni-app项目了，你也可以接着尝试运行出其他端。
04-展示H5页面
2、通过vue-cli命令行创建uni-app项目
1）npm install -g @vue/cli
05-全局安装vue-cli
2）vue create -p dcloudio/uni-preset-vue my-project
06-创建uni-app项目
3)会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板
07-选择模板
08-选择模板成功提示
4)根据上述直接进入项目根目录下，运行uni-app,这时我通过运行小程序端来学习
cd my-project
npm run dev:mp-weixin
09-进入项目目录，运行项目
5）运行成功后，如果没有微信小程序开发工具，你需要先前往 开发者工具下载页面安装一下工具，安装成功后，登录开发者工具
10-登录小程序开发者工具
6）选择uni-app项目文件下的小程序包：my-project\dist\dev\mp-weixin，配置好AppID,导入项目，此时你已经通过vue-cli命令行成功创建uni-app项目，并且运行出微信小程序端，你还可以尝试运行出其他端。
11-选择uni-app运行后的小程序文件路径
12-输入AppID,导入小程序
13-小程序运行成功
