'环境搭建'

src/pages/home.vue

 <template>
   <h-view id="home">
     <h-content>
-        首页
+      <section class="home-content">
+        这是首页
+      </section>
     </h-content>>
   </h-view>
 </template>
@@ -20,5 +22,10 @@ export default {
 }
 </script>
 <style lang="less" scoped type="text/less">
-
+  @import "../styles/mixin";
+.home-content{
+  .wh(100%,100%);
+  .sc();
+  .fja()
+}
 </style>

src/styles/app.core.less

@@ -6,3 +6,4 @@
 //@import "ionic-public-style";
 //@import "platform-iosx";
 //@import "platform-ios";
+

src/styles/mixin.less

+
+.setTopLine(@c: rgba(0,0,0,.1)) {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1px;  /*no*/
+  border-top: 1px solid @c;  /*no*/
+  color: @c;
+  transform-origin: 0 0;
+  transform: scaleY(0.5);
+}
+
+.setBottomLine(@c: rgba(0,0,0,.1)) {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;  /*no*/
+  border-bottom: 1px solid @c;  /*no*/
+  color: @c;
+  transform-origin: 0 100%;
+  transform: scaleY(0.5);
+}
+
+.setLeftLine(@c: rgba(0,0,0,.1)) {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;  /*no*/
+  bottom: 0;
+  border-left: 1px solid @c;  /*no*/
+  color: @c;
+  transform-origin: 0 0;
+  transform: scaleX(0.5);
+}
+
+.setRightLine(@c: rgba(0,0,0,.1)) {
+  content: " ";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 1px;  /*no*/
+  bottom: 0;
+  border-right: 1px solid @c;  /*no*/
+  color: @c;
+  transform-origin: 100% 0;
+  transform: scaleX(0.5);
+}
+
+.setLine(@c: rgba(0,0,0,.1)) {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 200%;
+  border: 1px solid @c;  /*no*/
+  color: @c;
+  height: 200%;
+  transform-origin: left top;
+  transform: scale(0.5);
+}
+
+// 宽高
+.wh(@width,@height){
+  width: @width;
+  height: @height;
+}
+
+// 字体大小，颜色
+.sc(@size:12px, @color:#ccc){
+  font-size: @size;
+  color: @color;
+}
+
+//flex 布局和子元素水平垂直对齐方式
+.fja(@jtype:center,@atype:center){
+  display: flex;
+  justify-content: @jtype;
+  align-items: @atype;
+}