1.需求分析
点击按钮的几个状态
image.png
注释：按钮的点击状态和loading状态和 不可点击状态是可以相互切换的
点击按钮-不可点击状态-loading状态-可点击状态。
按下按钮需要一个反馈（出现特殊的样式）
2.写代码
怎么写开源的代码
github初始化仓库
1.创建仓库
2.添加许可证明
image.png
一般用mit许可
3.初始化仓库
文件名不要用中文，npm会报错
npm init
4.下载vue
npm i vue
5.使用webstom来代替git，进行push操作
1.记住快捷键 shift shift vsc 然后在里面提交
- 要写一个.gitignore文件来过滤文件
3.push 还是用git 好一点
4.使用webstom可以过滤文件，这样方便使用
6.关于vue和css的知识点
1.Vue.component的用法
如果你写了
Vue.component('g-button',{
template:`
<button class="g-button">hi</button>
`
})
因为这是一个全局变量，所以在html中
Vue的使用里不要加data和message
image.png
这段代码的意思是，你可以在html中新建一个g-button的标签，他的内容就会替换成template中的内容
2.关于css：
关于字体的设置，我们可以这样设，甚至第一反应都应该是这样的，但是这样会出现bug，我们的button是14像素，如果这个前面的字体不是14像素，是12像素，那么页面就很不协调。
image.png
所以我们想出的方法是，使用变量去设置button的css，这样用户可以自行的设置按键的大小和高度，可以自行解决不协调的问题。（用css变量可以使用户自由的操作按钮的设置）
image.png
7.安装parcel
在官网上自己看文档，要注意的问题，如果一个包是给用户使用的，那么要全局安装，如果开发者使用的时候要加-D（局部安装），在开发过程中，最好，做一点就提交一次。
这里跟着视频再做一遍，基本思路是先创建一个src文件，然后新建一个.Vue的文件（这个是Vue的重要功能，单文件组件，可以把css，html，js整合到一个文件夹）将原来分散的template，css和js放在这个文件里，再新建一个js，导入Vue和.Vue的文件。把原来写的Vue写进去。
8.搞定了
运行的时候记得写--no-cache，感觉最好再来一遍。。。。。
最后附上图
image.png
