vue初级入门（router+rem+less）

案例陈述：

公共部分：公共头部，公共底部
主页：首页，我的
详情页：rem单位演示，使用less，第三个页面，第四个页面

关于less

1.安装less相关依赖

npm install less less-loader --save-dev
//记录到devDependencies中，因为这是我们在开发中使用的而非在生产中使用

2.具体代码

//主要体现代码html
 <div class="less-box">
        <div class="less-1">
          <div class="less-2"></div>
        </div>
      </div>

//主要体现代码less
<style lang="less" scoped>
  .less-box{
    margin: 2rem 0;
    width: 100%;
    height: 6rem;
    background: #FF0000;

    .less-1{
      width: 80%;
      height: 4rem;
      background: yellow;
      margin: 0 auto;

      .less-2{
        width: 60%;
        height: 2rem;
        background: darkslategray;
        margin: 0 auto;
      }
    }
  }
</style>

3.演示效果

less效果.png

github地址：https://github.com/liuyumei111/pro_name.git

下载时注意： 按照所需版本下载

本案例提交日期：Commits on Sep 14, 2018
本案例提交描述：使用less

下载后使用

1.进入到pro_name项目目录并且打开命令行安装依赖 ：npm install
2.启动服务：npm run dev   
3.打开http://localhost:8080

首页.png 我的.png