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

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

一，HBuilderX下载安装

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

二，nodejs下载

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

判断下载是否成功

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

三，开始配置

1，打开HBuilderX，点击工具一栏，点击插件安装，选择安装 内置浏览器 和 内置终端
在这里插入图片描述
2，新建一个项目

3,终端
点击左下角终端

上拉，分别输入npm install better-mock 和npm 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>