项目实战day2

项目实战day2

故心故心故心故心小故冲啊

---

---

一.sass基本语法学习

1.引言

众所周知css并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。

2.关于sass

sass是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails 的大力推动，逐渐被更多开发者使用。

sass是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早成熟css预处理语言。最初它是为了配合haml而设计的，因此有着和haml一样的缩进式风格。

sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss。
官方网站

3.Scss 与 Sass的区别

Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：
1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。
2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(😉，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。

4. Sass使用

①变量声明:

$highlight-color: #F90;
$lightColor: #ffffff;
$darkColor: #000000;
$redColor : #f00;
$blue-color: blue;

②变量引用：

border:1px solid $darkColor;

③嵌套CSS 规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

像这种情况，sass可以让你只写一遍，且使样式可读性更高。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

父选择器的标识符&

article a { color: blue }
article a:hover { color: red }

article a {
  color: blue;
  &:hover { color: red }
}

群组选择器的嵌套

.container h1, .container h2, .container h3
 { margin-bottom: .8em }

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

子组合选择器和同层组合选择器

、+和~
选择器> 选择一个元素的直接子元素。
article section { margin: 5px }
article > section { border: 1px solid #ccc }。
同层相邻组合选择器+选择header元素后紧跟的p元素
header + p { font-size: 1.1em }
同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：
article ~ article { border-top: 1px dashed #ccc }

.div1 {
  color:$blue-color;
  .div2 {
    border:1px solid $darkColor;
    .div3{
      font-size:14px;
      color:lighten($darkColor,70%);
      &>a {
        color:lighten($darkColor,70%);
      }
    }
  }
}

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

嵌套属性

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

混合器

混合器使用@mixin标识符定义
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
通过@include来使用这个混合器，放在你希望的任何地方
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

更多详细看官网

二.登录页-form表单组件

首页的完成主要通过vue-element-ui 组件库中的form表单组件完成的以及自己设计部分样式

三.布局组件定义及调用

可以通过这个的形式来导出导入

四.多级路由渲染

这里通过index.vue来当出口 (ps:找路由出口:找父级)

五.完成情况

1.首页的制作完成
2.审批制作完成