Vue <script setup>，不导入无法使用defineProps和defineEmits答案

【问题标题】：Vue <script setup>, unable to use defineProps and defineEmits without importing itVue <script setup>，不导入无法使用defineProps和defineEmits
【发布时间】：2021-11-20 19:16:16
【问题描述】：

根据official documentation，

defineProps 和 defineEmits 仅是编译器宏 可在<script setup> 内使用。他们不需要导入并在 <script setup> 时被编译掉已处理。

问题定义

如果不导入，我无法在 <script setup> 中使用 defineProps 和 defineEmits。请参考下面附上的错误截图。

我正在执行的 vue 代码

<!-- HelloWorld.vue -->
<template>
  <h1>{{ props.message }}</h1>
</template>

<script setup>
// import { defineProps } from 'vue';
const props = defineProps({
  message: {
    type: String,
    required: true,
  }
});
</script>

环境详情供参考：

vue	^3.2.6 (3.2.19)
vue-cli	@vue/cli 5.0.0-beta.4
node:	v14.16.1
npm	6.14.12

【问题讨论】：

标签： vuejs3 vue-composition-api vue-props vue-sfc vue-script-setup

【解决方案1】：

我们可以通过以下解决方案之一解决此问题。

使用 Vite 创建 Vue 项目。关注此link 了解更多信息。
yarn create vite <project-name> --template vue
在您的 eslint 配置文件中添加以下规则。关注此link 了解更多信息。

// .eslintrc.js
module.exports = {
  extends: ['plugin:vue/base'],
  rules: {
    'vue/script-setup-uses-vars': 'error',
  }
}

【讨论】：