HBuilderX学习--运行第一个项目

HBuilderX,简称HX,是轻如编辑器、强如IDE的合体版本,它及轻巧、极速,强大的语法提示,提供比其他工具更优秀的vue支持大幅提升vue开发效率于一身(具体可看官方详细解释)…

一,HBuilderX下载安装

官网地址
在这里插入图片描述安装过程直接下一步下一步,该勾选的勾选,可以选择自己的安装位置,不过一定要记住位置。

二,nodejs下载

nodejs官网地址
这里直接下载,记住一定这块可以不用修改安装路径
在这里插入图片描述

判断下载是否成功

win + r输入cmd打开命令提示符,输入node -v
显示出版本信息说明安装成功
在这里插入图片描述
至此我们需要学习的软件就安装完成!!!

三,开始配置

1,打开HBuilderX,点击工具一栏,点击插件安装,选择安装 内置浏览器内置终端
在这里插入图片描述
2,新建一个项目
在这里插入图片描述
在这里插入图片描述
3,终端
点击左下角终端
在这里插入图片描述
上拉,分别输入npm install better-mocknpm install element-ui
成功,刚创建的项目就会出现 node_modules文件夹
在这里插入图片描述
4,运行刚创建的项目
浏览器自行选择
第一次运行项目加载会有点慢
在这里插入图片描述
4.1,运行默认模板结果
如图运行成功
在这里插入图片描述
5,修改内容
我们需要把默认的内容删掉
写需要的内容

"navigationStyle": "custom"

在这里插入图片描述
修改之后如下:
在这里插入图片描述
继续修改
打开index.vue,如下图所示删掉部分内容
保留内容如下:
在这里插入图片描述

<template><view class="content"></view>
</template><script>export default {data() {return {}},methods: {}}
</script><style></style>

6,重新运行修改后的项目
发现是空白
在这里插入图片描述

四,基础学习编写

<template><view class="content"><div>{{msg}}</div><div>1</div><div class="box">12</div><div>{{abc}}</div><div class="box">abc</div><div class="fbox"><div class="child">123</div></div></view>
</template><script>export default {data() {return {msg: 'Hello Word',abc: 'Word Hello',}},onLoad() {},methods: {}}
</script><style>div{width:100px;height:100px;background-color:green;/*边框*/border: 1px solid black;/*边框圆角 像素值越大圆角越大如果需要圆直接写50%*/border-radius: 10px;/*外边距*/margin: 0px 30px 0px 0px;/*内边距内边距,边框--会影响盒子的大小*/padding: 50px 0px 0px 50px;display: inline;display: inline-block;vertical-align: top;}
.box{background-color: aquamarine;
}.box.abc{background-color: black;
}
.fbox{width: 500px;height: 500px;background-color: aquamarine;
}
.child{width: 200px;height: 200px;background-color: forestgreen;
}</style>

运行结果
在这里插入图片描述

实践:画出同心圆

在这里插入图片描述

思路:标签嵌套,一个圆距离另一个圆的上下左右距离都相同

做法一:
简单明了,但代码较多

/*六个标签嵌套*/
<template><view><div class="one"><div class="two"><div class="thr"><div class="four"><div class="five"><div class="six"></div></div></div></div></div></div></view>
</template><script>export default {data() {return {};}}
</script><style>
/*定义每个圆的位置*/
div{border: 1px solid black;margin: 15px 15px 15px 15px;}
.one{width: 180px;height:180px;border-radius: 50%;
}
.two{width: 150px;height:150px;border-radius: 50%;
}
.thr{width: 120px;height:120px;border-radius: 50%;
}
.four{width: 90px;height:90px;border-radius: 50%;
}
.five{width: 60px;height:60px;border-radius: 50%;
}
.six{width: 30px;height:30px;border-radius: 50%;}
</style>

运行结果:
在这里插入图片描述

方法二:简洁清晰

<template><view class="content"><div><div><div><div><div><div></div></div></div></div></div></div></view>
</template><script></script><style lang="less">div{/*设置边框*/border: 1px solid black;/*原本是要用margin来设置,但是由于是圆,上下左右距离一样故用padding*/padding: 20px;/*设置圆角*/border-radius: 50%;/*设置居中*/display: inline-block;}
</style>

运行结果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/50804.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言暑假刷题冲刺篇——day4

目录 一、选择题 二、编程题 &#x1f388;个人主页&#xff1a;库库的里昂 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏✨收录专栏&#xff1a;C语言每日一练 ✨其他专栏&#xff1a;代码小游戏C语言初阶&#x1f91d;希望作者的文章能对你…

应用在红外遥控领域中的心率传感信号接收芯片

远程遥控技术又称为遥控技术&#xff0c;是指实现对被控目标的遥远控制&#xff0c;在工业控制、航空航天、家电领域应用广泛。红外遥控是一种无线、非接触控制技术&#xff0c;具有抗干扰能力强&#xff0c;信息传输可靠&#xff0c;功耗低&#xff0c;成本低&#xff0c;易实…

APP Store上线问题及解决方案

将iOS应用上线到App Store可能会涉及一些问题&#xff0c;在上线iOS应用之前&#xff0c;确保你充分测试应用&#xff0c;遵循苹果的开发者指南和审核规则&#xff0c;以及关注用户的反馈&#xff0c;这些都能帮助你尽可能地解决问题并提供优秀的用户体验。以下是一些可能的问题…

sizeof和strlen的对比

文章目录 &#x1f6a9;前言&#x1f6a9;sizeof&#x1f6a9;strlen&#x1f6a9;sizeof和strlen对比 &#x1f6a9;前言 很多小白在学习中&#xff0c;经常将sizeof和strlen弄混了。本篇文章&#xff0c;小编讲解一下sizeof和strlen的区别。&#x1f937;‍♂️ &#x1f6a9…

Windows下搭建Tomcat HTTP服务,发布外网远程访问

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…

【Jellyfin影音服务器】 本地部署公网远程影音库

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…

Linux环境下远程访问SVN服务:SVN内网穿透的详细配置与操作指南

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

无涯教程-PHP - 常量数组

现在可以使用 define()函数定义数组常量。在PHP 5.6中&#xff0c;只能使用 const 关键字定义它们。 <?php//define a array using define functiondefine(animals, [dog,cat,bird]);print(animals[1]); ?> 它产生以下浏览器输出- cat PHP - 常量数组 - 无涯教程网无…

手写模拟SpringBoot核心流程(二):实现Tomcat和Jetty的切换

实现Tomcat和Jetty的切换 前言 上一篇文章我们聊到&#xff0c;SpringBoot中内置了web服务器&#xff0c;包括Tomcat、Jetty&#xff0c;并且实现了SpringBoot启动Tomcat的流程。 那么SpringBoot怎样自动切换成Jetty服务器呢&#xff1f; 接下来我们继续学习如何实现Tomcat…

Mysql-InnoDB数据页结构

一、页结构说明 大致分7部分 二、记录在页中的存储 2.1 页面记录内存结构 行格式 存储到 User Records 部分&#xff0c;每当我们插入一条记录&#xff0c;都会从 Free Space 部分申请一个记录大小的空间划分到 User Records 部分 &#xff0c;用完则申请新的页&#xff1b; …

【MySQL系列】Select语句单表查询详解(一)

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

【unity数据持久化】XML数据管理器知识点

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Wireshark数据抓包分析之互联网协议(IP协议)

一、实验目的&#xff1a; 通过wireshark抓包分析IP协议的具体内容 二、预备知识&#xff1a; 1.IP地址存在的意义&#xff0c;就是为了弥补mac地址的不足&#xff0c;用于区分不同的网络 2.还有一些ip协议、ip数据包这些东西 三、网络拓扑 四、实验过程&#xff1a; part1&…

如何在 Kubernetes 中借助 Service 实现灰度发布和蓝绿发布

前言 部署在 Kubernetes 集群中的应用&#xff0c;在升级发布时可能会存在的问题&#xff1a; 1&#xff0c;由于 Kuberneter 底层 Pod 容器生命周期与网络组件生命周期是异步管理的&#xff0c;在升级时如果没有处理好应用优雅退出的问题&#xff0c;就很容易导致 http 访问请…

四川玖璨电子商务有限公司:怎么拉升抖店体验分

抖音是中国最受欢迎的短视频分享平台之一&#xff0c;而在抖音上开设自己的抖店成为许多电商从业者的选择。为了提高抖店的曝光度和用户体验&#xff0c;抖店体验分成为了一个重要的指标。在本文中&#xff0c;小编将从两个方面来讨论怎么拉升抖店体验分&#xff0c;包括影响因…

Flink的Standalone部署实战

在Flink是通用的框架&#xff0c;以混合和匹配的方式支持部署不同场景&#xff0c;而Standalone单机部署方便快速部署&#xff0c;记录本地部署过程&#xff0c;方便备查。 环境要求 1&#xff09;JDK1.8及以上 2&#xff09;flink-1.14.3 3&#xff09;CentOS7 Flink相关信…

第 7 章 排序算法(4)(插入排序)

7.7插入排序 7.7.1插入排序法介绍: 插入式排序属于内部排序法&#xff0c;是对于欲排序的元素以插入的方式找寻该元素的适当位置&#xff0c;以达到排序的目的。 7.7.2插入排序法思想: 插入排序&#xff08;Insertion Sorting&#xff09;的基本思想是&#xff1a;把n个待排…

点云平面拟合和球面拟合

一、介绍 In this tutorial we learn how to use a RandomSampleConsensus with a plane model to obtain the cloud fitting to this model. 二、代码 #include <iostream> #include <thread> #include <pcl/point_types.h> #include <pcl/common/io.…

Android GreenDao数据库升级(附Demo)

前言 大家好久不见&#xff0c;一转眼马上八月份下旬了&#xff0c;最近由于工作比较忙&#xff0c;没时间给大家更新博文。百忙之中抽出时间&#xff0c;给大家来更新一篇关于GreenDao3数据库的升级。 关于GreenDao的详细介绍以及一些逻辑性的增、删、改、查等&#xff0c;可以…

Nevron Open Vision for .NET Crack

Nevron Open Vision for .NET Crack NET Vision是一个用于生成具有数据可视化功能的强大数据表示应用程序的包。该套件具有用于.NET的Nevron Chart、用于.NET的Nevron Diagram和用于.NET的Nevron User Interface。精心设计的对象模型、许多功能和卓越的演示使复杂数据的可视化变…