开发准备
1、vscode 常用插件：
Auto Rename Tag:同步修改 HTML/XML标签 Prettier - Code formatter: 代码格式化 Path Autocomplete: 路径补全 Image preview: 鼠标悬停预览图片 Easy LESS: 浏览器是不识别less代码，实时编译`less`到`css`、sass CSS Peek: 快速跳转css位置 GitLens、Git History、Git Graph: git提交记录 Prettier ESLint、ESLint：eslint校验js Vetur、Volar、Vue VSCode Snippets
Sass 在服务端处理，使用Node-Sass，而 Less 在客户端处理，需要引入 less.js 来编译 Less 代码； Sass 的功能比 Less 更强大，支持条件语句、循环等编程特性，而 Less 功能相对简单。一般使用less就够了。
2、sourcetree master、develop、自己分支。合并master提New Merge Request，方便有问题回退。
3、安装nvm（可切换多个node版本，方便不同项目node不同版本）、node
查看npm源npm config get registry
切换源
npm config set registry=https://registry.npmmirror.com
5、命名规范
- 类、接口、枚举使用 PascalCase。
- 函数、属性、本地变量使用 camelCase。
- 全局变量为全大写加下划线，函数内不得有魔法值。
- 非 css、html 尽量不加中杠和下划线。
- 尽可能使用完整的单词拼写命名。
- css 样式命名中，模块名称单词连接以中杠连接。
- 模块下的子模块或状态连接如：{模块}-{子模块}(--{状态})。类名推荐使用横线（-）连接,例如 .head-logo、.nav-li。对于ID，通常采用驼峰式命名，例如 #navLastLi。
- 图片素材等以装饰图长方形 banner、标志图 icon、按钮 btn、导航 nav、文字标题 title、背景 bg 为区分前缀。
- 图片素材完整命名规范为{前缀}{模块}{状态}命名。
html
1、结构语义化
<!-- 头部 -->
<header>
<nav></nav>
</header>
<!-- 内容区 -->
<main>
<!-- 左侧 -->
<article>
<!-- 左侧标题 -->
<header></header>
<!-- 图片区块 -->
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
<!-- 右侧 -->
<aside>
<!-- 友情链接 -->
<nav></nav>
<section></section>
</aside>
</main>
<!-- 底部 -->
<footer></footer>
main用来规定出header、footer外的所有内容：
<aside>：可以存放广告、搜索内容、分享链接等<section>：表单、清单、文章分块等内容<article>：表示一个完整的、自成一体的内容块。如文章或者新闻报道。
3、行内元素和块级元素
整体比较：
| 块级元素 | 行内元素 |
|---|---|
| 独占一行。默认情况下宽度自动填充父元素宽度 | 宽度随元素内容变化。相邻的行内元素会排列在同一行内，直到一行排不下，才会换行。 |
可以设置 width、height | 设置 width、height 无效 |
可以设置 margin 和 padding | 可以设置 margin-left、margin-right、padding-left、padding-right |
对应：display: block | 对应 display: inline |
3.1 常见块级元素
<div>- 标签块<h1>、<h2>、<h3>、<h4>、<h5>、<h6>- 标题 1 - 标题 6<form>- 表单<hr>- 水平线<ul>- 无序列表<ol>- 有序列表<li>- 定义列表项目，用于ul和li中<p>- 段落<table>、<thead>、<tbody>、<thead>、<th>、<tr>、<td>- 表格元素
3.2 常见行内元素
<a>- 超链接或者锚点<b>- 字体加粗<br>- 换行<code>- 定义计算机代码文本<i>- 斜体<img>- 图片<input>- 输入框<label>- 为input进行标记/标注<button>- 按钮<textarea>- 多行文本框
3.3 行内元素和块级元素转换
display 属性可以使行内元素和块级元素之间转换。
display: inline- 转换为行内元素display: block- 转换为块级元素display: inline-block- 转换为行内块元素
3.4 常见的空元素：<br>、<hr>、<img>、<input>、<link>、<meta>；
css
1、布局
1.1、flex教程
1.2、文档流
文档流：将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也就普通流。 脱离文档流：脱离文档流的元素，将不再在文档流占据空间，而是漂浮在文档流上方。
float: left/right：使用之后会脱离，但是其他盒子会环绕该元素的周围。 position: absolute/fixed：absolute 为绝对定位，脱离文档流之后还是会相对于该元素的父类（做了 relative/absolute 定位的父类）进行偏移。而 fixed 就是完全脱离文档流，相对于 HTML （整个浏览器窗口）的形式展示。transform 布局：absolute + transform: translate(-50%, -50%)。
2、 盒子模型
标准盒子：标准盒子的 contentWidth 等于设置的 width，它的实际总宽度 = width + padding + border + margin。（高度也一样）
怪异盒子：怪异盒子的 contentWidth 等于设置的 width + padding + border，它的实际总宽度 = contentWidth + margin。（高度也一样）
设置盒子模式：inherit 继承、content-box 标准盒子、border-box 怪异盒子
3、移动端
使用单位：em、rem、% 以及 vw/vh
布局：使用 rem 单位、通过 position: relative/absolute 布局、Flex 布局
300ms 点击延迟 为什么出现：需要通过延迟判断用户是需要单击还是双击 如何解决：设置 、通过 FastClick 库
4、css教程
js
2、阮一峰ES6教程
解构赋值、模板字符串、字符串方法、函数、数组、对象、promise、async/await、Module 、class
ui框架
响应式布局
1、项目
User： uniapp(微信小程序)==> rpx ==> 750尺寸设计图
Boss： $px: calc(100vw / 750);
兼容ipad @media screen and (width >= 768px) {}
2、方案
2.1Flexible布局方案
早期github.com/amfe/lib-fl… 阿里手淘h5页面适配
Flexible方案是通过JavaScript来模拟vw的特性,vw是基于Viewport视窗的长度单位，这里的视窗指的就是浏览器可视化的区域。rem缩放方案。postcss-pxtorem或者px2rem
2.2vw适配方案
到今天为止，vw已经得到了众多浏览器的支持，也就是说，可以直接考虑将vw单位运用于我们的适配布局中。
750px宽度的，从上面的原理来看，那么100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。可以使用PostCSS的插件postcss-px-to-viewport，让我们可以直接在代码中写px。PostCSS编译之后就是我们所需要的带vw代码。
postcss-aspect-ratio-mini 实现元素的宽高比锁定。确保元素的宽高比始终保持一致，即使在其内容或窗口大小发生变化时也是如此。保证图像、视频和其他媒体元素在不同设备上都能正确显示。
解决1px方案，Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px。对于1px是不建议将其转换成对应的vw单位的，可使用PostCSS插件，解决1px可以使用postcss-write-svg。
2.3 @media规则，媒体查询
www.runoob.com/cssref/css3… 代码量大，不方便维护。不能够完全适配所有的屏幕尺寸，需要编写多套css样式
2.4百分比布局方案
百分比的值不好计算,需要确定父级的大小，因为要根据父级的大小进行计算
