3.element-ui组件

文档路径：Element - The world's most popular Vue UI framework

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

4.vue-i18n组件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
 
Vue.use(VueI18n)
 
const i18n = new VueI18n({
  locale: 'en', //切换语言
  messages: {
    zh: require('@/language/zh.js'),
    en: require('@/language/en.js'),
  },
});
 
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App),
  components: { App },
  template: ''
})

国际化js文件示例

 zh.js

//zh.js
 
export const lang = {
  swap1: '转账',
  swap2: '充值',
  
};

en.js

//en.js
 
export const lang = {
  swap1: 'Transfer',
  swap2: 'Recharge',
  
};

使用场景示例

1.标签中
{{ $t('lang.swap1') }}
 
2.script中
this.$message.error(this.$t('lang.swap5')+'');
 
3.标签上，使用`:`绑定使用
"$t('lang.swap58')" show-word-limit v-model="ruleForm.to">
 
<el-dialog :title="$t('lang.swap74')" :visible.sync="dialogVisible" width="30%">
   <AddBindAcctDialog :visible.sync="dialogVisible" @getList="getList"/>
el-dialog>

5.vuex组件

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库，采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。Vuex 是什么？ | Vuex

为什么我要使用，我做的这个钱包门户设计小狐狸钱包多个账户地址的切换，实时监听切换并刷新展示页面数据。因为store可以存储数据状态，发生改变时只需管理数据的实际状态就可以达到所有组件中数据的唯一性，实时性。

 官方提供的最简单的store

import { createApp } from 'vue'
import { createStore } from 'vuex'
 
// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
 
const app = createApp({ /* 根组件 */ })
 
// 将 store 实例作为插件安装
app.use(store)

模块化

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

本人项目中的模块化结构

实际代码

index.js

//index.js
 
import Vue from 'vue';
import Vuex from 'vuex';
import state from '@/store/state';
import * as actions from '@/store/actions';
import * as mutations from '@/store/mutations';
import * as getters from '@/store/getters';
import createPersistedState from 'vuex-persistedstate';
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
  state,
  actions,
  mutations,
  getters,
  plugins: [
    createPersistedState({
      paths: ['isConnectWallet', 'account'],
    }),
  ],
});
 
export default store

 state.js

export default {
  //provider对象
  provider: {},
  //合约对象
  contracts: {},
  //签名对象
  signer: {},
  //小狐狸钱包的账户address
  account: '',
  net: 0,
  //gas费，后续可能要用
  gasPrice: 0,
  //钱包余额
  balance: '0.0',
  //作为是否链接登录到小狐狸钱包的标志
  isConnectWallet: false,
  //绑卡列表数据，用于下拉框
  accountList: [],
  //交易计数，用于发生交易时同步刷新交易记录列表
  tradeCounter: 0,
};

mutations.js

 
  export const saveProviderStore = (state, provider) => {
    state.provider = provider;
  };
 
  export const saveContractsStore = (state, contracts) => {
    state.contracts = contracts;
  };
 
  export const  saveAccountStore = (state, account) => {
    state.account = account;
  };
 
  export const  saveBalanceStore = (state, balance) => {
    state.balance = balance;
  };
 
  export const  saveNetStore = (state, net) => {
    state.net = net;
  };
 
  export const  saveGasPriceStore = (state, gasPrice) =>  {
    state.gasPrice = gasPrice;
  };
  export const  saveIsConnectWallet = (state, isConnectWallet) =>  {
    state.isConnectWallet = isConnectWallet;
  };
  export const  saveSigner = (state, signer) =>  {
    state.signer = signer;
  };
  export const  saveAccountList = (state, accountList) =>  {
    state.accountList = accountList;
  };
  export const  saveTradeCounter = (state, tradeCounter) =>  {
    state.tradeCounter = tradeCounter;
  };

 getter.js

// 获取最终的状态信息
export const provider = state => state.provider;
export const contracts = state => state.contracts;
export const signer = state => state.signer;
export const account = state => state.account;
export const net = state => state.net;
export const gasPrice = state => state.gasPrice;
export const balance = state => state.balance;
export const isConnectWallet = state => state.isConnectWallet;
export const accountList = state => state.accountList;
export const tradeCounter = state => state.tradeCounter;

 action.js

 
// 触发保存方法
export const SET_PROVIDER = ({ commit }, payload) => {
  commit('saveProviderStore', payload);
};
export const SET_CONTRACTS = ({ commit }, payload) => {
  commit('saveContractsStore', payload);
};
export const SET_ACCOUNT = ({ commit }, payload) => {
  commit('saveAccountStore', payload);
};
export const SET_BALANCE = ({ commit }, payload) => {
  commit('saveBalanceStore', payload);
};
export const SET_NET = ({ commit }, payload) => {
  commit('saveNetStore', payload);
};
export const SET_GAS_PRICE = ({ commit }, payload) => {
  commit('saveGasPriceStore', payload);
};
 
export const SET_IS_CONNECT_WALLET = ({ commit }, payload) => {
  commit('saveIsConnectWallet', payload);
};
 
export const SET_SIGNER = ({ commit }, payload) => {
  commit('saveSigner', payload);
};
 
export const SET_ACCOUNT_LIST = ({ commit }, payload) => {
  commit('saveAccountList', payload);
};
export const SET_TRADE_COUNTER = ({ commit }, payload) => {
  commit('saveTradeCounter', payload);
};
 
 
.........其他代码
 
export const setProvider = ({commit},address) => {
  let web3Provider;
  if (window.ethereum) {
    web3Provider = window.ethereum;
 
    .....获取web3钱包中的一些熟悉，地址，provider，合约对象等
 
    //commit('saveAccountStore', address);//另外一种方式
    SET_ACCOUNT({commit},address);
    SET_PROVIDER({commit},provider);
    SET_CONTRACTS({commit},daiContract);
    SET_IS_CONNECT_WALLET({commit},true);
    SET_SIGNER({commit},signer);
 
  }
};
 
 

store的使用

1.action.js中要改变数据状态时
 
//commit('saveAccountStore', address);//另外一种方式
SET_ACCOUNT({commit},address);
 
2.组件中，使用语法糖获取值
 
import {mapState} from "vuex";
 
export default {
  computed: {
    ...mapState(['account']),
    getAccount() {
      if (this.account) {
        return '0x...' + this.account.substring(this.account.length - 4,                 this.account.length);
      } else {
        return '';
      }
    },
  },
}
 
3.组件中，不使用语法糖获取值
 
this.$store.getter.account;
 
4.组件中使用语法糖调用方法
methods: {
    handleLogin() {
      this.$store.dispatch('connectWallet');
    },
  }
 
5.组件中改变store数据状态
let balanceStr = '0.0';
this.$store.dispatch('SET_BALANCE', balanceStr);
 

效果

6.ethers.js

1.install安装
2.js文件中引入即可使用
 
import * as ethers from 'ethers';
 
获取钱包余额
 
const balance = await daiContract.balanceOf(address);
let balanceStr = ethers.utils.formatUnits(balance, 18);
 

总结

主要学习使用Vue的基础语法，然后跟随老师实际操作，最后自己搭建Vue前端的整体框架。安装依赖组件，并学习各个组件的用法。接下来文章介绍Vue框架使用中遇到的问题及解决方法。打脸待续