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…

C++(4)C++内存管理和命名空间

内存管理 new/delete C语言 malloc free完成对堆内存的申请和释放。 C new delete 类 new&#xff1a;动态申请存储空间的运算符&#xff0c;返回值为申请空间的对应数据类型的地址 int *p new int(10); 申请了一个初始值为10的整型数据 int *p new int[10]; 申…

LeetCode无重复字符的最长子串

给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”&#xff0c;所以其长度为 3。 示例 2: 输入: s “bbbbb” 输出: 1 解释: 因为无重复字符的最长子串是 “…

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…

Java中collection接口的基本介绍和常用方法的代码以及迭代器的使用代码

在 Java 中&#xff0c;Collection 接口是 Java 集合框架中的根接口&#xff0c;它定义了一组操作来处理一组对象&#xff0c;即集合。Collection 接口的主要目的是提供一种统一的方式来操作和处理集合&#xff0c;无论是使用列表、集、队列还是映射等。 以下是关于 Collectio…

无涯教程-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…

R语言:联合多指标的ROC曲线

# 加载数据和包rm(list=ls())library(pROC)library(ggplot2)setwd("C:/Users/syy/Desktop/MRI_lab/")data<- read.csv("test1.csv", header = T)data$Groups

c++ std::thread线程类

1. std::thread类 /* 源码来自vs2017 */using _Thrd_id_t unsigned int; struct _Thrd_t { // thread identifier for Win32void* _Hnd; // Win32 HANDLE_Thrd_id_t _Id; //保存线程id };class thread { // class for observing and managing threads public:class id;using …

Linux内核学习笔记——ACPI命名空间

所有定义块都加载到单个命名空间中。命名空间 是由名称和路径标识的对象层次结构。 以下命名约定适用于 ACPI 中的对象名称 命名空间&#xff1a; 所有名称的长度均为 32 位。 名称的第一个字节必须是“A”-“Z”、“_”之一。 名称的每个剩余字节必须是“A”-“Z”、“0”之…

【移动端开发】鸿蒙系统开发入门:代码示例与详解

一、引言 随着华为鸿蒙系统的日益成熟&#xff0c;越来越多的开发者开始关注这一新兴的操作平台。本文旨在为初学者提供一份详尽的鸿蒙系统开发入门指南&#xff0c;通过具体的代码示例&#xff0c;引导大家逐步掌握鸿蒙开发的基本概念和技术。 二、鸿蒙系统开发基础 鸿蒙系…

Mysql-InnoDB数据页结构

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

open cv学习 (十一)视频处理

视频处理 demo1 import cv2 # 打开笔记本内置摄像头 capture cv2.VideoCapture(0) # 笔记本内置摄像头被打开 while capture.isOpened():# 从摄像头中实时读取视频retval, image capture.read()# 在窗口中实时显示读取到的视频cv2.imshow("Video", image)# 等到用…

《React.js手把手教程:从初学者到实战高手》- 关于React.js

最近公司倒闭了。目前这个大环境&#xff0c;不知何时能找到下一家。但人不能闲着&#xff0c;总得给自己找点事做。 其实很早之前就想写本书了&#xff0c;但苦于一直没有闲情。既然现在有点时间&#xff0c;那就开始动手吧。 刚开始是想写有关React Native的&#xff0c;但…

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

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