本示例是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-vueUI - 安装
assembly-css依赖，一个通用样式库 - 支持
scss写法
一些配置项
- tsconfig.json 中, include 项对于ts相关扩展名的配置
{
...
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
...
}
