一、 创建git仓库，编写README.md，上传；
二、 声明LICENSE(即文件许可)，可参考“阮一峰的文件许可图”；这里我们用MIT许可证，最宽松的一个，创建步骤见下面的图示；一直点绿色按钮就行；
image.png
one.png
two.png
three.png
four.png
然后你就可以看到LICENSE就创建完成了；
five.png
三、选择用什么第三方的东西
1、js安装用npm，npm init，然后git push一下；
npm init.png
2、用什么写呢？当然vue了，你做的是依赖于vue的组件嘛；所以安装vue，
npm i --save vue；
安装vue.png
3、创建一个.gitignore文件，把node_modules放进去，这个文件夹不需要上传到git；
image.png
4、创建index.html，
zh-Hans中，“zh”代表中国，“Han”代表汉字，“s”代表简体；先做出一个按钮的基本样式；
image.png
-
知识点：用css变量来控制；
image.png
四、添加parcel-bundler
1、我们要使用vue的单文件组件，把css、js、html都写在一个文件里，所以安装parcel-bundler，npm i -D parcel-bundler；（使用npm安装包时，这个包是给用户使用的，则不需要加“- D”，给开发者使用则添加上“- D”；）
2、根目录创建一个src目录，把js文件都放进去，创建app.js和button.vue,删除外面的button.js，且app.js是主入口文件（就是写new Vue的文件）
3、利用pacel打包生成预览
- 报下图No entres found这个错的话，在 parcel 后面添加 index.html 即可，
./node_modules/.bin/parcel改成./node_modules/.bin/parcel index.html；
image.png
- 当你打开网页又遇到下面的问题时，说明你的vue文件没用对，可以去官网文档看一下，在package.json中添加文档内的内容，然后重新运行
./node_modules/.bin/parcel index.html --no-cache，一定要加--no-cache！！！！然后就可以看到网页正常显示了~~（也可用npx parcel index.html --no-cache来运行）
error.png
文档.png
五、添加icon
1、Vue中的插槽<slot></slot>，<slot></slot>意味着这里可以自己写内容
<div id="app">
<g-button>Wayv</g-button>
</div>
//g-button组件
<template>
<button class="g-button">
<slot></slot>
</button>
</template>
2、去iconfont添加icon；
①把icon加入至项目；
②编辑一下项目；
image.png
image.png
image.png
image.png
image.png
③使用Symbol引入，可查看帮助文档如何引入
image.png
3、在button.vue中添加icon
①使用时传icon的name来变icon，所以需要用到
props这个选项；
button.vue.png
index.html.png
4、控制icon的位置（在左边还是右边）
①你可以用v-if、v-else根据变量名称判断显示位置，但这样太不简洁了；
②通过绑定class名称
image.png
image.png
:class="{[iconPosition]: true}"这个写法意思就是你给我传来left的话，它的class名就是left，你传来哪个，哪个就是它的class名！！！5、如果用户在
icon-position中写的不是left、right呢，用props里的validator函数来筛选；
image.png
6、我们发现我们每次用icon的时候都得写一次
<svg>........</svg>那一段html，俗话说，重复就是bug，所以我们把icon单独拎出来，写一个组件；
六、单元测试
1、 BDD、TDD、Assert
BDD行为驱动开发（Behavior行为，Driven驱动，Development开发）；
TDD测试驱动开发（Test测试，Driven驱动，Development开发）；
Assert 断言；（断言正确时没有提示，错误时会出现警告）
2、引用chai.js进行单元测试，npm i -D chai，具体语法可参考chai.js的文档
image.png
如果你的断言是对的，则不出现任何报错~~~
3、为什么要单元测试呢？
不单元测试的话，一个组件里那么多按钮，难道你要一个一个去试吗。。肯定是借助工具来测试比较高效一些；
4、测试按钮的点击事件，这时就应该用mock，引入chai-spies，
npm i -D chai-spies；
网友评论