This example is a purely static login module written by VUe3 and Composition API using Vue-Router, vuex, typescript, and ant-Design-Vue UI library.









Project directory

Vue3 - ts - antd - login ├ ─ ─ the README. Md ├ ─ ─ Babel. Config. Js ├ ─ ─ package. The json ├ ─ ─ public │ ├ ─ ─ the favicon. Ico │ └ ─ ─ index. The HTML ├ ─ ─ SRC │ ├ ─ ─ @ types │ │ └ ─ ─ but ts │ ├ ─ ─ App. Vue │ ├ ─ ─ assets │ │ ├ ─ ─ the login - 560-400. The PNG │ │ ├ ─ ─ the login - loading - 1. PNG │ │ ├ ─ ─ the login - loading - 2. PNG │ │ └ ─ ─ the login - success. PNG │ ├ ─ ─ components │ │ ├ ─ ─ the HelloWorld. Vue │ │ └ ─ ─ global │ │ └ ─ ─ FullLoading. Vue │ ├ ─ ─ the config │ │ └ ─ ─ app. Ts │ ├ ─ ─ main. Ts │ ├ ─ ─ the router │ │ └ ─ ─ but ts │ ├ ─ ─ shims - vue. Which s │ ├ ─ ─ store │ │ ├ ─ ─ index. Ts │ │ ├ ─ ─ modules │ │ │ ├ ─ ─ app │ │ │ │ ├ ─ ─ actions. The ts │ │ │ │ ├ ─ ─ getters. Ts │ │ │ │ ├ ─ ─ mutations. Ts │ │ │ │ └ ─ ─ state. Ts │ │ │ ├ ─ ─ but ts │ │ │ └ ─ ─ the user │ │ │ ├ ─ ─ actions. The ts │ │ │ ├ ─ ─ getters. Ts │ │ │ ├ ─ ─ mutations. Ts │ │ │ └ ─ ─ state. Ts │ │ ├ ─ ─ mutations. Ts │ │ └ ─ ─ utils. Ts │ └ ─ ─ views │ ├ ─ ─ Home. Vue │ └ ─ ─ Home │ └ ─ ─ the Login. The vue ├ ─ ─ Json ├─ vue.config.js ├─ map.lockCopy the code

Project description

  • This project uses scaffolding Vue CLI V5.0.0-alpha.4, Please pick a preset: select Manually select features

Global type

  • The @/@type/index.ts directory holds the global state in @/store/modules
  • Globally referencable methods or libraries are defined in the @/config/app.ts file

Data state management

  • @/store/utils.ts encapsulates and returnsstore 的 commit,dispatch,gettersMethods.
  • vuex-persistedstateDependencies support state persistence

Components are written

  • Currently only supportedComposition API, not installedclass-componentRelated,
  • @/component/global stores global components, such as fullloading.vue

UI library

  • useant-design-vue UI
  • The installationassembly-cssDependency, a common style library
  • supportscsswriting

Some configuration items

  • In tsconfig.json, include items are configured for TS extensions
{..."include": [
    "src/**/*.ts"."src/**/*.tsx"."src/**/*.vue"."tests/**/*.ts"."tests/**/*.tsx"],... }Copy the code

The project address

Gitee.com/sonicwater/…