如何在Nx中创建无预生成器的空白应用以搭建Vuetify项目？

步骤1：初始化空Nx工作区（未创建的话） #

先建一个空白的Nx工作区，指定pnpm作为包管理器：

pnpm create nx-workspace my-workspace --preset=empty --packageManager=pnpm
cd my-workspace

步骤2：创建空白项目目录 #

在工作区根目录下新建项目文件夹，比如my-vuetify-app（推荐放在apps目录下，符合Nx的默认结构）：

mkdir -p apps/my-vuetify-app
cd apps/my-vuetify-app

步骤3：用Vuetify官方脚本初始化项目 #

在当前目录执行Vuetify的创建命令，按终端提示完成初始化（注意末尾的.表示在当前目录生成项目）：

pnpm create vuetify .

步骤4：把项目接入Nx配置体系 #

回到工作区根目录，用Nx的工作区生成器为这个项目创建基础配置文件：

nx g @nrwl/workspace:project my-vuetify-app --type=application --directory=apps/my-vuetify-app

然后手动修改生成的apps/my-vuetify-app/project.json，将默认的targets替换为Vuetify项目的实际脚本：

{
  "targets": {
    "dev": {
      "executor": "nx:run-commands",
      "options": {
        "command": "pnpm dev",
        "cwd": "apps/my-vuetify-app"
      }
    },
    "build": {
      "executor": "nx:run-commands",
      "options": {
        "command": "pnpm build",
        "cwd": "apps/my-vuetify-app"
      }
    },
    "preview": {
      "executor": "nx:run-commands",
      "options": {
        "command": "pnpm preview",
        "cwd": "apps/my-vuetify-app"
      }
    }
  }
}

步骤5：测试Nx命令 #

现在就可以用Nx统一管理这个项目的任务了：

# 启动开发服务
nx dev my-vuetify-app
# 构建生产包
nx build my-vuetify-app
# 预览构建结果
nx preview my-vuetify-app

如果后续需要Nx的Vue生态支持（比如代码生成、统一lint规则），可以安装@nrwl/vue插件，再根据Vuetify的项目结构调整插件配置即可。

内容的提问来源于stack exchange，提问作者svenema