darkti UI—项目初始化

一、 创建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；