前言

在前面一系列内容中，我们由浅入深地了解了DApp的组成，从本小节开始我将带领大家如何完成一个完整的DApp。

本小节则先从前端开始。

前端技术栈

在前端开发者速入：DApp中的前端要干些什么？文中我说过，即便是在DApp中前端所干的事情也是和传统web开发中要干的事情是一模一样的。到这里我们假设你已经是一个前端开发者或者最起码会使用js、css、html开发一个完整的页面。

但是除了以上这些你还需要掌握的是以下两种js库。

1.web3.js

我在前面提到过，DApp中的前端实际上要干的事情是将普通用户的数据调用合约进行上链，因此在DApp中前端少不了要和合约进行交互。当然，也可以由后端完全对合约进行交互，最后由前端直接调用后端接口，这和传统的业务开发就并无二致了。

即便如此，但这样的开发模式其实是很复杂的，也并不能完全完成一个DApp的开发，因此你必须要了解如何不通过后端去直接调用合约的读写方法。

web3.js就是这样的一个库。

2.ethers.js

从名字上可以看出它的诞生和以太坊公链脱不了干系，但实际上该库并不代表只能在要使用以太坊公链上的合约的时候才能使用，实际上它干的事情和web3.js要干的事情是一模一样的。

只是web3.js相较于ethers.js更为活跃，用户基数也更大。

所以选择web3.js还是ethers.js全凭你个人喜好，不过站在我的角度来看，更推荐你完全掌握了web3.js之后再学习一下ethers.js，因为在我多年的开发上来看，我更喜欢使用ethers.js，它更简单也更易于使用。

3.vue、quasar、html、css、js

这几个技术栈实际上并不是因为DApp才需要的技术栈，在这里提出来是因为在后续的开发中，我将使用这几个主流框架和前端语言为大家进行实战讲解。如果你对这些没有任何概念，那么我建议你先去简单学习一下之后再开始。

另外需要提一嘴的是，这里的quasar是一个全能型基于vue的框架，包含了常用的ui组建和各种强大实用的功能，如果你并不想学习，也可以在后续开发中就把它当做是一个vue的UI组件库即可。

最后

当然，要完成一个完整的DApp的前端开发，只掌握以上的js库是不够的，例如连接钱包的库、例如处理大数的库等待，这些我都将在实战中为大家一一讲解，但是目前你需要花一些时间去了解以下我上门所说的两个库。