Skip to content

部署 Vue.js 3 应用

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

本文将以 examples/hexo 作为示例进行部署。

本文以 SSG(服务端静态编译)的方式进行示例,因此选择 Zeno 提供的 Node.js 服务端渲染 进行部署

开始创建

使用 zeno create 创建新应用,选择 zenohq/examples(此为 Zeno 的示例仓库,你可以 fork 后进行创建,也可完全使用自己的新代码仓库)作为代码仓库,而后选择使用 NodeJS SSG 进行部署。

接下来会遇到两个配置分配是:

  • Root Directory 工作目录:由于 examples 是一个 monorepo 所以创建时填写的 RootDirectory 是 vue。实际使用过程中,如果你根目录即为应用内容那么使用默认值即可。
  • Build Command 构建命令:此处使用 NPM 调用构建 npm run build ,如果你使用 yarn 或者其他可按实际情况修改。

填写完毕后提交创建即可。大致流程如下

$ zeno create
✔ zenohq / Zeno
✔ examples
Selected repository zenohq/examples to create new project
Name your new project: example-vue3
✔ NodeJS SSG / NodeJS Server-Side Generate
Root Directory: vue
Build Command: npm run build
Artifacts Directory: dist
Project created, with name `example-vue3`