创建项目

使用前请确认 Node 版本 >= 10，推荐使用最新版 Node.js（12.x 或 14.x）

如果未安装过，请先安装 @midwayjs/faas-cli 工具。

  1. $ npm i @midwayjs/faas-cli -g

生成示例代码

使用命令生成示例代码。

  1. $ f create --template-package=@midwayjs-examples/midway-hooks-vue3

有点大，网慢可能需要等待一下。

  1. ➜  applications of create --template-package=@midwayjs-examples/midway-hooks-vue3
  2. Generating boilerplate...
  3. ✔ The directory where the service should be created · vue3_xxx
  5. 1...
  6. 2...
  7. 3...
  8. Enjoy it...
  10. Successfully generated boilerplate for template: "@midwayjs-examples/midway-hooks-vue3"
  12. Usage:
  13.     - cd vue3_xxx
  14.     - npm install
  15.     - npm run test
  16.     - and read README.md
  18. Document ❤ Star: https://github.com/midwayjs/midway

本地开发

整个示例代码结构如下。

  1. ➜  vue-xxx tree
  2. .
  3. ├── README.md
  4. ├── babel.config.js
  5. ├── f.yml                             # 函数配置文件
  6. ├── package.json
  7. ├── public
  8. │   ├── favicon.ico
  9. │   └── index.html
  10. ├── src                               # vue 源码目录
  11. │   ├── App.vue
  12. │   ├── apis                          # 函数目录
  13. │   │   ├── config
  14. │   │   │   └── config.default.ts
  15. │   │   ├── configuration.ts
  16. │   │   ├── hook
  17. │   │   │   └── useMethod.ts
  18. │   │   ├── lambda
  19. │   │   │   └── index.ts
  20. │   │   └── render.ts
  21. │   ├── assets
  22. │   │   └── logo.png
  23. │   ├── components
  24. │   │   └── HelloWorld.vue
  25. │   ├── main.ts
  26. │   ├── router
  27. │   │   └── index.ts
  28. │   ├── shims-vue.d.ts
  29. │   └── views
  30. │       ├── About.vue
  31. │       └── Home.vue
  32. ├── tsconfig.json
  33. └── vue.config.js                      # vue 插件配置文件
  35. 10 directories, 21 files

我们在本地可以通过 npm run serve 来启动，启动时会自动发一个请求到函数端拿数据，渲染到页面，访问 [http://127.0.0.1:8080/](http://127.0.0.1:8080/) ，整体效果如下。
image.png

切换顶部的 Tab 区域，还会请求不同的函数接口。

部署

使用 f deploy ，默认发布到阿里云，也可以自行修改到其他平台。