w-75ccc

v-if="formData.contentType === QAcommunityDict.contentType.html"

adaddd

w-75

222222222

Nuxt 是一个简便和强大的开发框架，使用它能快速创建性能和质量都不错的应用或者网站。

本文将从开发体验说起，建立一个项目骨架，还不涉及到编写具体的业务。

开发体验，就是如何用工具提升开发效率。任何一种面向开发者的框架和工具，都关注开发体验。具体来说，就是下面这些方面，

类型校验
格式化
风格检查
单元测试
打包部署

准备工作

Nuxt 是基于 Node.js^[1] 的开发框架。本文的开发环境 (macOS) 需要安装

Visual Studio Code
Node.js v18 LTS
pnpm 包管理器

按照官网的指导，安装好就可以。安装成功后，展示版本如下

新建项目

建立一个新的项目，只需要一条命令

pnpm dlx nuxi@latest init <project-name>

pnpm dlx 意思是从远程下载最新版的包直接执行。nuxi 是 Nuxt 的命令行 CLI 工具。

新建项目过程中，注意按提示选择使用 pnpm 和 git。

这个项目需要下面两个 vscode 扩展

dbaeumer.vscode-eslint
vue.volar

注意，其它的扩展如 esbenp.prettier-vscode 最好禁用掉。

用命令 pnpm run dev 启动项目。

新建后端 API

后端 API 放在 server/api 目录下，每个文件对应一个 API。

server/api/hello.ts

export default defineEventHandler((event) => {  return {    hello: 'world'  }})

使用 curl localhost:3000/api/hello 就可以访问到。

类型校验

Nuxt 项目本身不依赖 TypeScript，它使用 IDE 也就是 VSCode 的类型校验能力。例如，我们在代码里错误的使用类型，IDE 立刻就能给出提示。

非常好，不需要任何额外的配置，我们就享用到了类型校验。

格式化和风格检查

如果希望在保存文件时，自动格式化代码，就要安装 ESLint^[2]，一个 js/ts 语言的静态代码分析检查工具。

在当前项目里添加 ESLint 支持，首先需要安装下面的包：

pnpm nuxi module add eslintpnpm add -D eslint

nuxi module add 意思是为 Nuxt 项目安装 ESLint 模块，会自动初始化一些配置文件啥的。pnpm add -D 意思是将 ESLint 添加到 package.json 的 devDependencies 下面，注意官方的文档缺了这个步骤，会导致 VSCode 的插件无法在当前项目里生效。

在 nuxt.config.ts 的选项中设置 config.stylistic 为 true，就开启了 ESLint 风格检查^[3]，这样 ESLint 既会提示代码的语法问题，也会提示代码的格式问题。

export default defineNuxtConfig({  modules: [    '@nuxt/eslint'  ],  eslint: {    config: {      stylistic: true // <---    }  }})

在 .vscode/settings.json 里加上，保存文件时尽力修复 ESLint 报告的问题。

{  // Enable ESlint flat config support  "eslint.useFlatConfig": true,  "eslint.format.enable": true,  "editor.codeActionsOnSave": {    "source.fixAll.eslint": "explicit"  },}

一切都改好后，需要执行一下 pnpm install 和重启 VSCode，让它识别到上面所有的配置改动。

这样的话，只用 ESLint 插件，做到了保存时自动格式化并且修复风格问题。

例如，默认的风格是用单引号字符串，语句不需要分号结束。IDE 把这些风格问题标红，保存时会自动修复。

单元测试

执行单元测试，需要先安装

pnpm add -D @nuxt/test-utils vitest

我们编写的工具函数放在 server/utils 下

server/utils/add.ts

export function add(a: number, b: number) {  return a + b}

编写一个测试用例

server/utils/add.test.ts

import { expect, test } from 'vitest'import { add } from './add'test('adds 1 + 2 to equal 3', () => {  expect(add(1, 2)).toBe(3)})

使用 pnpm vitest 执行所有的单元测试

打包部署

首先我们完成一个功能闭环

用户打开首页，页面请求 API，拿到结果回显到页面

Nuxt 里页面使用 API 非常简单，代码如下

app.vue

<script setup lang="ts">const { data } = await useFetch('/api/hello')</script><template>  <div>    <p>Hello {{ data?.hello }}</p>    <p>Counter {{ data?.counter }}</p>  </div></template>

将这个功能发布到线上有两种方法

自有云主机并且安装了 nodejs

使用 pnpm run build 构建，把产物 .output 目录整个拷贝到云主机上，用 node .output/server/index.mjs 启动。

没有云主机，想免费使用 Cloudflare 的边缘节点。

推荐使用这种方式，因为它没有成本，也不怕被破坏者刷流量。步骤如下：

登录到 https://admin.hub.nuxt.com
点击 Create a new token with required permissions 将当前账号连接到 Cloudflare 账号，根据界面的指南操作。
点击 New Project 然后 Import a GitHub repository 创建一个项目
选择需要发布的 Github 仓库
点击 Import repository

配置成功后，每次提交都会自动部署，相当方便。

Cloudflare 的边缘节点速度不算快，但胜在无成本的让你发布的应用立刻被全世界访问到，适合建立独立站快速试错。

回顾与总结

本文是一个简单的入门教程，并且搭建了一套开发体验不错的项目骨架。真正用起来，还需要看一遍 Nuxt 的官方文档^[4]，再结合实例探索。

作为参考，本文的代码能在 https://github.com/aclisp/captcha-server 查看，上线后的效果能在 https://captcha.nuxt.dev/ 查看。

注意 Nuxt 的定位是全栈框架，一般要求项目开发者自行完成从前端到后端的一切工作。当然，它也能当一个 API Server 来使用，提供 API 的包装和转发，可以做的事情很多。由于它部署在 Cloudflare 的节点上，几乎没有什么访问限制。

参考资料

[1]Node.js: https://nodejs.org/zh-cn[2]ESLint: https://eslint.org/[3]ESLint 风格检查: https://eslint.style/[4]Nuxt 的官方文档: https://nuxt.com/docs/getting-started/introduction