frontend

• Vue 3 as the foundation
• Tailwind CSS for styling
• vuelidate for validate
• axios for http
• crypto-js for crypto
• element-plus for component
• pinia for store
• pinia-plugin-persistedstate for persist
• vue-request for http wrapper
• vue-i18n for i18n
• type-fest for type extension
• miragejs for mock
• swagger-typescript-api for api generate from yaml|json
  • eta for template engine
• prism for api mock from yaml|json
• icon-font-generator for api generate font from svg
• typescript-json-serializer for serialize and deserialize
• lodash for utils extension
• unplugin-vue-components for auto import components
• dayjs for time formatter
• vueuse for vue hook

Directory Description

• TREE.md

About components

• ac-xx
• ad-xx
• lo-xx
• g-xx

About api

• service config
• generate api yarn api:generate --name=xx-service
• mock api yarn api:mock
  • real data mock yarn api:mock -d
• use api

• About hooks

  • useClipboard
  • useTitle

About naming

BaaS专有名词定义：
联盟： federation
企业： organization
联盟链：consortium-chain
私链： private-chain
平行链： para-chain
联盟链共识： tendermint
平行链共识： para
私链共识： raft 

About coding

<template>
  <div id="xx-[com|page]"></div>
</template>
<script lang="ts">
export default {
  name: 'xx-xx'
}
</script>
<script lang="ts" setup>
/*var*/
/*var*/
/*api*/
/*api*/
/*func*/
/*func*/
</script>

<style lang="scss" scoped>
#xx-[com|page] {}
</style>

Some skills

<template>
  <div class="hover:bg-[url('/src/../xxx.svg')]
"></div>
</template>

Project setup

yarn

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.