第一个Vue组件，按键

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 然后在里面提交

2. 要写一个.gitignore文件来过滤文件
   3.push 还是用git 好一点
   4.使用webstom可以过滤文件，这样方便使用

6.关于vue和css的知识点

1.Vue.component的用法
如果你写了

Vue.component('g-button',{
    template:`
hi
`
})

因为这是一个全局变量，所以在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