一、什么是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)在点击工具栏里的文件 -> 新建 -> 项目:
3)选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。
4)浏览器运行:进入uni-app-dome项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。
5)浏览器运行后,会在浏览器中直接打开创建好的H5项目,记得把浏览器设置为移动端模式,选择合适的机型进行页面展示,到此你已经学会了HBuilderX 可视化界面创建uni-app项目了,你也可以接着尝试运行出其他端。
2、通过vue-cli命令行创建uni-app项目
1)npm install -g @vue/cli
2)vue create -p dcloudio/uni-preset-vue my-project
3)会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板
4)根据上述直接进入项目根目录下,运行uni-app,这时我通过运行小程序端来学习
cd my-project
npm run dev:mp-weixin
5)运行成功后,如果没有微信小程序开发工具,你需要先前往 开发者工具下载页面安装一下工具,安装成功后,登录开发者工具
6)选择uni-app项目文件下的小程序包:my-project\dist\dev\mp-weixin,配置好AppID,导入项目,此时你已经通过vue-cli命令行成功创建uni-app项目,并且运行出微信小程序端,你还可以尝试运行出其他端。