7.5记录

element ui源码分析

1. build  使用了ci工具，存放打包工具的配置文件

packages 存放所有的组件

types 接口数据声明

@vue/babel-preset-jsx  让vue支持jsx语法

了解什么是JSX以及它的语法_冰雪为融的博客-优快云博客_什么是jsx一、什么是JSX？JSX 即 JavaScript XML，是一种在 React 组件内部构建标签的类 XML 语法。JSX 并不是一门新的语言，仅仅是个语法糖（syntactic sugar），允许开发者在 JavaScript 中书写 HTML 语法。最后，每个 HTML 标签都转化为 JavaScript 代码来运行。这样对于使用 JavaScript 来构建组件以及组件之间关系的应用，在代...https://blog.youkuaiyun.com/lhjuejiang/article/details/80293589render函数和jsx语法的使用

@vue/cli-plugin-babel/preset  浏览器兼容

sass基础教程

npm install node-sass -D
npm install sass-loader -D

1. 使用变量
// 通过定义变量减少代码冗余，使用$
$color: #ccc; // 定义，以下所有样式都可以使用
div{
    $width: 200px; // 只能在这个div里使用
    width: $width;
    color: $color; // 使用
}
// 除了定义具体数据，
$border: 1px solid $color;
p{
    border: $border; // == border: 1px solid #ccc
}

2. 变量名
// - 和 _ 被认为对等
$back-color: blue;
div{
    background-color: $back_color; // == background-color: blue
}

3. 嵌套css写法
div{
    p{
        color: #ccc
    }
}
// 正常情况下，嵌套写法都没什么问题，但是使用选择器，例如伪类选择器hover，直接:hover不起效果，sass提供了 &

4. 父选择器 &
// sass在解开一个嵌套规则时，会通过空格连接父选择器和子选择器
使用&，则会替换掉空格

5. >、+和~
div > p // div子元素中第一个p标签
div + p // div同级元素后的第一个p标签
div ~ p // div后所有在同级p标签

6. 嵌套属性
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
等同于
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
等同于
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

7. 导入sass文件