parcel
scss
Vue 单文件组件
WebStorm 的快捷键
CSS变量和:root选择器
Vue.component
插槽（slot）
$emit
props
Headless Chrome
Mock
npm scripts
不要妄图掌握所有的知识点，针对不同知识点不同的掌握程度：
工具知识点——webpack，parcel,less,sass,babel等，这些工具很容易被取代，有的可能一年左右就被取代了。这种只需要知道怎么用即可。
语言特性知识点——比如JS的promise，async，Vue框架特性，CSS变量及:root选择器等，有些暂时没有用到，不是在这一节中有太多体现。这些必须要深入了解 。
抽象特点知识点——比如代码如何组织，写代码的流程，写之前需要思考或者做什么，设计模式等。
点击按钮——它包括loading状态，
不可点击按钮，2和1之间是互相切换的。
hover按钮（手机没有hover）
按下按钮（未松开）
5.其他
点击之后弹出菜单
外形是一组按钮的样式
等等按钮
可以用window的墨刀 或者苹果的sketch 画UI图
按钮宽度用32px,因为一般用8的倍数或者10的倍数。
不过上面的都是UI设计，不是写代码的重点。
免费的git hub是一个开放的平台，如果是私有的代码应该放到收费的gitlab brakets，可以隐藏你的代码的地方，当然公司原因花钱git hub也有收费版本（每个用户每月5美元左右）。
我这里就先用免费的git hub就好了
声明license的目的是告诉用户这个组件代码和如何开源的。最著名的就是软一份的一个license的图——如何选择开源许可证？
其中MIT许可证是最宽松的许可证。对商业公司最友好的许可证。就是你改了代码之后可以选择闭源或者开源，改了代码之后可以不用说明，然后还可以用作者的名字打广告。
我们在git hub上面点击Create new file,名字叫做license,当写完这个名字之后就可以看到右边显示一个choose a license template,点击它，然后找到MIT License,然后点击Review and submit,这里的哪一年和版权名字是什么可以修改。然后点击绿色的commit new file,然后点击Create pull
request,然后再点击merge pull request,然后再点击confirm merge,然后delete branch.这时候你去看Code就有一个License了。
首先是node和NPM，使用代码npm init
这时候会要你输入下面不限于这些信息
"name": "gulu-demo",
"version": "1.0.0",
"description": "这个是一个UI框架",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/bomber063/DIY-UI-frame-by-Vue.git"
},
"keywords": [
"Vue，ui"
],
"author": "bomber hong",
"license": "MIT",
npm i --save vue
npm i vue
由于安装Vue之后会出现node_modules文件夹，里面有大量的文件，可以选择新建一个.gitignore来设置某个路径的文件并不提交到git hub仓库。
shift shift，就是按两下shift，它会给你一个搜索框，可以搜索其他任意的快捷键,比如可以搜VCS，它的全称是version control system,版本控制系统，就是用于git操作的。搜索vcs后可以看到一个vcs Operations Popup，它可以用于与git操作，所以webstorm可以代替git bash这个软件。当然有时候会git操作失败，失败就继续用git bash吧。
搜索vcs后可以看到一个vcs Operations Popup，你可以看到它的快捷键，我的快捷键是alt+`，每个人这个的快捷键不一定相同。
设置（ctrl+alt+s），它在文件——>设置里面，然后就可以看到所有的快捷键，而且可以修改他们
格式化代码（ctrl+alt+L）
在WebStorm中输入Button.log就会自动转换为console.log(Button);
用emmet简化CSS写法可以搜索把emmet里面CSS的Enable fuzzy search among CSS abbreviations打钩
CSS背景颜色（background）设置，在设置->编辑器->常规->外观里面找到Show CSS color preview as background打钩即可。
webStorm还可以查看你修改的本地历史，可以右键->本地历史->显示历史就可以看到了用WebStorm修改的所有历史,可以撤回还原代码
webStorm可以统一一次把所有变量替换为你需要的变量，鼠标右键点击重构重命名,在这个作用域里面的变量都可以一次性修改
我的WebStorm版本是2019.1
这里我在用button.js创建组件代码的时候出现一个WebStorm的警告，就是Vue.component这里会有浅黄色的波浪线，但是代码在浏览器中是可以正常执行的。不清楚为什么。代码如下
Vue.component('g-button', {
template: `
<button>hi</button>
`
});
把代码修改为下面的，也就是增加了import,Vue.component这里浅黄色的波浪线就没有了，但是代码在浏览器中不能正常执行
import {AsyncComponent as Vue} from "vue/types/options";
前面的代码改成import Vue from 'vue'也可以
Vue.component('g-button', {
template: `
<button>hi</button>
`
});
去掉WebStorm中黄色警告 编写简单的 Vue 组件