码迷,mamicode.com
首页 > 移动开发 > 详细

uni-app快速入门(转)

时间:2019-06-08 20:26:15      阅读:2858      评论:0      收藏:0      [点我收藏+]

标签:article   体验   命令   vue   net   导入   通过   疑问   webp   

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

通过 HBuilderX 可视化界面

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

开始之前,开发者需先下载安装如下工具:

HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

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

如使用cli方式创建项目,可直接下载标准版,因为uni-app编译插件被安装到项目下了。

创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目:

技术图片

选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。

技术图片

运行uni-app

  1. 浏览器运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。

    技术图片
  2. 真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app。

    技术图片

    如手机无法识别,请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。 注意目前开发App也需要安装微信