web前端开发环境搭建,linux搭建测试环境步骤

时间:2022-05-21 阅读:34 评论:0 作者:老李

前言web前端开发环境搭建

从本节开始web前端开发环境搭建,我来带领大家学习uni app,这是一款逆天的前端框架web前端开发环境搭建,基于vue.js,同一套代码,可发布到iOS、Android、H5、以及各种小程序等多个平台,本节,我们部署在微信小程序和Android上面,体验下这款强大的前端框架。

一、基础知识

1.uni app简介

​uni-app​ 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

​uni-app​在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

web前端开发环境搭建

2.安装HBuilder X工具

下载HBuilder X工具,地址:https://www.dcloud.io/HBuilderX.HTML

web前端开发环境搭建

本文使用的是开发版本。

二、搭建步骤

1.创建项目

点击文件 -> 新建 -> 项目:

web前端开发环境搭建

选择uni-app,并且模板选择uni-ui项目,然后点击创建

web前端开发环境搭建

2.运行到web

运行到浏览器

web前端开发环境搭建

浏览器效果如下

web前端开发环境搭建

web前端开发环境搭建

3.运行到Android

首先需要打开手机开发者选项,并且开启USB调试

web前端开发环境搭建

点击运行->运行到手机或模拟器,选择连接到的手机设备

web前端开发环境搭建

编译安装过程如下

web前端开发环境搭建

手机状态如下:

web前端开发环境搭建

安装后界面如下:

web前端开发环境搭建

4.运行到微信小程序

点击运行->运行小程序模拟器

web前端开发环境搭建

指定微信开发者工具路径

web前端开发环境搭建

出现错误,按照提示应该打开微信开发者工具,进行配置即可

web前端开发环境搭建

点击微信ide菜单栏下安全设置

web前端开发环境搭建

开启服务端口

web前端开发环境搭建

重新运行,可以看到小程序端已经正式运行起来了

web前端开发环境搭建

寄语:读万卷书,行万里路web前端开发环境搭建

本文链接: https://www.liaier.com/1182.html 转载请注明出处!

相关文章 是不是在找它?!
评论区 交流一下吧!

共有0条评论来说两句吧...

欢迎 发表评论: