如何学习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-小程序运行成功

四、万事开头难，恭喜你，创建项目这件事进行到这里你已经完成，好的开始是成功的一半，相信后面的学习你也会得心应手，本人也会在后面的学习中不断更新自己如何学习uni-app的，加油，我们一起学习吧！