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>
运行结果：
