Vue3.0 +Quasar+ ethers.js interacts with Ethereum smart contracts

illustrate

This series of tutorials will lead you through an application delivered with Ethereum smart contracts. Before starting this series of tutorials, you need to have the following knowledge:

1. Use vue proficiently and know vue 3.0
2. Will use vue components
3. Have a clear understanding of Ethereum smart contracts

Tool description

Quasar

Quasar is a ui framework that supports VUE, link:

Quasar Framework

As for it is not the focus of this tutorial, the reason why Quasar is used here is not necessary, it is just because I personally think the design style of this UI framework is very good, I like it very much, if you don’t like to use this, you can also You can use other ones casually, or directly HTML+css.

ethers.js

Like its name, it is written in js.

ethers.js is a js library, and its main function is to help websites connect with contracts.

contract

The contract here should be an Ethereum smart contract to be precise.

We all know that Ethereum is an open source public blockchain platform, and the biggest feature of Ethereum is its support for contracts.

What is a contract?

You can Baidu for detailed concepts. Here, for the convenience of the tutorial, you can quickly understand it as:以太坊智能合约就是运行在区块链上的程序。

Unlike traditional programs:

1. The website runs in the browser
2. The mobile app runs on the mobile system
3. computer software that runs on a computer system

Therefore, you can also call it an APP, but it runs on the Ethereum public chain. And it is truly decentralized, it has the following characteristics:

1. only run on the blockchain
2. fully decentralized
3. The code is open, transparent and open source, anyone can view it
4. Once the program is deployed, the code cannot be modified