配置本地 Nuxt 开发环境是一个简单的过程，只需执行几个基本命令即可完成。

Nuxt 项目模板

要在本地环境中设置 Nuxt 项目模板，请运行以下命令并按照提示操作：

1npx nuxi@latest init <项目名称>

Nuxt 项目模板 为 Nuxt 应用提供了一个基础结构，包含预配置的页面、组件和设置。

通过下方的小部件预览模板中已配置好的 Nuxt 应用：

代码检查（Linting）

代码检查 是分析源代码以发现潜在错误、漏洞或风格问题的过程。代码检查工具 是自动执行这一过程的软件，它们能检测常见错误和不一致之处，并向开发者提供反馈。

无论你是独立开发还是团队协作，设置代码检查工具都是良好实践，有助于保持代码风格统一并避免可预防的错误。在 JavaScript 中最常用的工具是 ESLint。

配置 ESLint

• 在项目目录中安装 ESLint 模块。

1npm install eslint --save-dev

• 在项目中初始化该工具。此命令会提出若干问题，用于确定项目的配置选项。

1npx eslint --init

• 初始化完成后，若选择使用 JavaScript 文件作为配置文件，项目中将新增一个 .eslintrc.js 文件。该文件包含代码检查器的配置信息。

• 配置文件允许为项目添加自定义规则。你可以参考 ESLint 官方文档中的规则说明，然后将感兴趣的规则添加到 rules 属性中。例如，以下配置添加了 no-console 规则（当代码中出现 console.log 时抛出错误）和 no-empty-function 规则（对空函数声明发出警告）：

1module.exports = {
2  env: {
3    browser: true,
4    es2021: true
5  },
6  extends: [
7    'plugin:vue/vue3-essential',
8    'standard-with-typescript'
9  ],
10  overrides: [],
11  parserOptions: {
12    tsconfigRootDir: __dirname,
13    ecmaVersion: 'latest',
14    sourceType: 'module',
15    project: 'tsconfig.json'
16  },
17  plugins: [
18    'vue'
19  ],
20  rules: {
21    'no-console': 'error',
22    'no-empty-function': 'warn'
23  }
24}

• 要在项目中运行 ESLint，可使用以下命令，它会同时检查 .vue 和 .ts 扩展名的文件，并根据 .eslintrc.js 中的配置尝试自动修复可修复的问题：

1npx eslint --ext .vue,.ts --fix ./ -c .eslintrc.js

• 为了避免每次手动输入这条命令，我们可以将其添加到 package.json 文件的 scripts 字段中。

1"scripts": {
2    "build": "nuxt build",
3    "dev": "nuxt dev",
4    "generate": "nuxt generate",
5    "preview": "nuxt preview",
6    "postinstall": "nuxt prepare",
7    "lint": "npx eslint --ext .vue,.ts --fix ./ -c .eslintrc.js"
8  }

• 现在，只需运行以下命令即可启动代码检查：

1npm run lint

Git 提交前钩子

之前我们讨论了代码检查，了解到它如何通过检测错误和不一致来提升代码质量。然而，开发者可能不希望每次保存文件时都受到代码检查的干扰，也不愿每次都手动运行检查。另一种解决方案是使用提交前钩子，在将代码提交到仓库前自动进行代码检查。

配置 Git 提交前钩子

要设置一个提交前钩子，在提交前检查项目文件是否符合代码规范，请按以下步骤操作：

1. 在 .git/hooks/ 目录下创建一个名为 pre-commit 的文件。如果尚未初始化 Git，则可能还没有 .git 目录。
2. 在新文件中添加运行 ESLint 的 npm 命令：

1#!/bin/sh
2
3# 提交前运行代码检查
4npm run lint

1. 保存文件。如果使用 macOS 或 Linux，还需要赋予该文件可执行权限：chmod +x .git/hooks/pre-commit。
2. 测试钩子：对项目进行修改，暂存更改并提交。在提交流程开始前，ESLint 命令将自动运行。如果存在错误，提交将会失败。