vue3 实战教程基础篇 环境搭建遇到的问题 unexpected token "indent"

运行环境

@vue/cli 5.0.4
node v12.19.0
npm 6.14.8
package.js 文件

{
  "name": "vue3-essential",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "node-sass": "^7.0.0",
    "pug": "^3.0.2",
    "pug-plain-loader": "^1.1.0",
    "sass-loader": "^10.2.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

在这里我遇到两个错误

1.就是node-sass 版本太高这里我安装6.0的就ko了

npm install pug-plain-loader pug "sass-loader@10.*" "node-sass@6.0.0" --save-dev

2. pug unexpected token “indent”

ERROR in ./src/App.vue?vue&type=template&id=7ba5bd90&lang=pug (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90&lang=pug)
unexpected token “indent” 这个是缩进的意思你只需要将div#app 前面的空格删除顶行写就可以

<template lang="pug">
div#app
  img(src="./assets/logo.png")
  h1 Welcome from pug & sass
</template>