uni-app安装到建立项目开发环境

一、UNI-APP简述
uni-app实现了一套代码,同时运行到多个平台;如下图所示,一套代码,同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具(底部8个终端选项卡代表8个终端模拟器):
uni-app安装到建立项目开发环境_第1张图片
实际运行效果如下:
uni-app安装到建立项目开发环境_第2张图片

二、工具安装
uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目,二选一即可,看个人习惯。下面用可视化界面方式创建项目;vue-cli命令行方式详见UNI-APP官网:https://uniapp.dcloud.io/README

可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,开始之前,开发者需先下载安装HBuilderX工具,官方IDE下载地址:https://www.dcloud.io/hbuilderx.html

uni-app安装到建立项目开发环境_第3张图片
下载App开发版,可开箱即用;下载成功后直接解压即可,点击目录下的HBuilderX.exe即可进入开发。
uni-app安装到建立项目开发环境_第4张图片

三、创建uni-app项目
在点击右上角工具栏里的文件 -> 新建 -> 项目:
uni-app安装到建立项目开发环境_第5张图片
uni-app安装到建立项目开发环境_第6张图片
选择uni-app,输入项目名称(如:uni-app-demo),选择项目保存路径,选择模板,点击创建,即可成功创建 uni-app项目。点击模板里的提供的五个模板可以根据需求去选择,都已经写好对应模板需求的组件,可体验官方示例。

创建好项目后,选择不同的模板,uni-app目录结构会略有不同,但大体一致,如下:
uni-app安装到建立项目开发环境_第7张图片

四、简单的配置一下开发偏好:
uni-app有自己的插件库,直接点击【工具】>> 【插件安装】即可配置安装
uni-app安装到建立项目开发环境_第8张图片
我额外安装了prettier,stylelint这两个插件,因为后续将将项目运行到浏览器中时会报错,安装后就可以成功运行到浏览器端了。
uni-app安装到建立项目开发环境_第9张图片
好了,基本的安装工作就是这么多,下面我们看一下如何运行

五、运行uni-app项目
运行uni-app项目有六种方式,详见官网文档,这里只说两种(运行到浏览器和微信开发者工具):

首先要配置一下你的浏览器的安装路径,因为默认HBuilder是检测不到的。
【工具】>>【设置】>>【运行配置】
uni-app安装到建立项目开发环境_第10张图片
路径如果不知道保存在哪,可以在桌面上鼠标右键浏览器【属性】,目标里的路径复制过去即可。
uni-app安装到建立项目开发环境_第11张图片

1、在浏览器运行:在HBuilder中,进入uni-app-demo项目下pages里的任何一个.vue文件,点击HBuilderX工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。
uni-app安装到建立项目开发环境_第12张图片
2、在微信开发者工具里运行:要先打开微信开发者工具进行授权,方法如下:打开微信开发者工具,点击设置图标,选择【安全】,服务端口选择开启
uni-app安装到建立项目开发环境_第13张图片uni-app安装到建立项目开发环境_第14张图片
然后在HBuilder中,进入uni-app-demo项目下pages里的任何一个.vue文件,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
uni-app安装到建立项目开发环境_第15张图片

你可能感兴趣的:(uni-app安装到建立项目开发环境)