Vue-Promised 使用教程
1. 项目的目录结构及介绍
Vue-Promised 项目的目录结构如下:
vue-promised/
├── dist/
├── examples/
├── src/
│ ├── components/
│ ├── composables/
│ ├── index.ts
│ ├── promised.ts
│ ├── types.ts
│ └── utils.ts
├── tests/
├── .gitignore
├── .npmignore
├── .prettierrc
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock
目录介绍:
dist/
: 打包后的文件目录。examples/
: 示例代码目录。src/
: 源代码目录,包含组件、组合函数、类型定义等。components/
: Vue 组件目录。composables/
: Vue 组合函数目录。index.ts
: 入口文件。promised.ts
: 核心实现文件。types.ts
: 类型定义文件。utils.ts
: 工具函数文件。
tests/
: 测试代码目录。.gitignore
: Git 忽略文件配置。.npmignore
: NPM 忽略文件配置。.prettierrc
: Prettier 代码格式化配置。CODE_OF_CONDUCT.md
: 行为准则。CONTRIBUTING.md
: 贡献指南。LICENSE
: 许可证文件。package.json
: 项目依赖和脚本配置。README.md
: 项目说明文档。tsconfig.json
: TypeScript 配置文件。yarn.lock
: Yarn 依赖锁定文件。
2. 项目的启动文件介绍
Vue-Promised 的启动文件是 src/index.ts
,该文件是项目的入口点,负责导出项目的主要功能和组件。
// src/index.ts
export { Promised } from './promised'
export { usePromise } from './composables/usePromise'
启动文件介绍:
Promised
: 核心组件,用于处理异步流程控制。usePromise
: 组合函数,用于在 Vue 3 中管理 Promise 状态。
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他配置信息。
{
"name": "vue-promised",
"version": "2.2.0",
"description": "Composable Promises & Promises as components",
"main": "dist/vue-promised.cjs.js",
"module": "dist/vue-promised.esm.js",
"types": "dist/vue-promised.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"test": "jest",
"lint": "eslint src examples",
"prepublishOnly": "npm run build"
},
"dependencies": {
"@vue/composition-api": "^1.0.0-beta.21"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-typescript": "^7.12.7",
"@typescript-eslint/eslint-plugin": "^4.11.0",
"@typescript-eslint/parser": "^4.11.0",
"eslint": "^7.16.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-prettier": "^3.3.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"rollup": "^2.35.1",
"rollup-plugin-typescript2": "^0.29.0",
"typescript": "^4