vue3 + Composition API + ts + antd 登录示例

本示例是vue3和Composition API写的纯静态登录模块，用到了vue-router、vuex、typescript，UI库是ant-design-vue。

项目目录

vue3-ts-antd-login
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── @types
│   │   └── index.ts
│   ├── App.vue
│   ├── assets
│   │   ├── login-560-400.png
│   │   ├── login-loading-1.png
│   │   ├── login-loading-2.png
│   │   └── login-success.png
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── global
│   │       └── FullLoading.vue
│   ├── config
│   │   └── app.ts
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   ├── shims-vue.d.ts
│   ├── store
│   │   ├── index.ts
│   │   ├── modules
│   │   │   ├── app
│   │   │   │   ├── actions.ts
│   │   │   │   ├── getters.ts
│   │   │   │   ├── mutations.ts
│   │   │   │   └── state.ts
│   │   │   ├── index.ts
│   │   │   └── user
│   │   │       ├── actions.ts
│   │   │       ├── getters.ts
│   │   │       ├── mutations.ts
│   │   │       └── state.ts
│   │   ├── mutations.ts
│   │   └── utils.ts
│   └── views
│       ├── Home.vue
│       └── home
│           └── Login.vue
├── tsconfig.json
├── vue.config.js
└── yarn.lock

项目说明

• 本项目使用脚手架 Vue CLI v5.0.0-alpha.4 创建，Please pick a preset: 选择 Manually select features

全局类型

• @/@type/index.ts 目录存放 @/store/modules 中的全局状态
• @/config/app.ts 文件中定义了全局可引用的方法或库

数据状态管理

• @/store/utils.ts 封装并返回 store 的 commit、dispatch、getters 方法。
• vuex-persistedstate 依赖支持状态持久化

组件编写

• 目前只支持 Composition API ，没有安装 class-component 相关依赖
• @/component/global 目录存全局组件，比如 FullLoading.vue

UI 库

• 使用 ant-design-vue UI
• 安装 assembly-css 依赖，一个通用样式库
• 支持 scss 写法

一些配置项

• tsconfig.json 中, include 项对于ts相关扩展名的配置

{
  ...
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  ...
}

项目地址

https://codechina.csdn.net/sonicwater1/vue3-ts-antd-login