vue quasar JSX无法解析组件

wljmcqd8  于 2023-01-09  发布在  Vue.js
关注(0)|答案(1)|浏览(228)

下面的代码:
Tmp1Component.tsx

import { h, defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  setup () {
    const x = "test"
    },
  render() {
    return [<q-btn>Test</q-btn>,<div>Tes2</div>]
}}
)

Tmp1Page.vue

<template>
  <tmp1-component />
  <tmp2-component />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Tmp1Component from '../components/Tmp1Component.tsx'
import Tmp2Component from '../components/Tmp2Component.vue'

 
export default defineComponent({
   name: 'Tmp1Page',
   inheritAttrs: false,
   components: { Tmp1Component, Tmp2Component },
   setup () {
     {}
  }
});
</script>

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
//    '@quasar/babel-preset-app'
  ],
  plugins: ["@vue/babel-plugin-jsx", "transform-vue-jsx"]
}

package.json

{
  "name": "kitty",
  "version": "0.0.1",
  "private": true,
  "description": "Kitty desc",
  "author": "amirny2205 <*.ru>",
  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./",
    "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/babel-plugin-jsx": "^1.1.1",
    "@vue/cli-plugin-babel": "^5.0.8",
    "axios": "^0.21.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "core-js": "^3.8.3",
    "jquery": "^3.6.3",
    "pinia": "^2.0.11",
    "quasar": "^2.6.0",
    "vue": "^3.0.0",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.0.0"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
    "@quasar/app-vite": "^1.0.0",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.0.0",
    "prettier": "^2.5.1",
    "typescript": "^4.5.4",
    "vite": "^3"
  },
  "engines": {
    "node": "^18 || ^16 || ^14.19",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  },
  "productName": "Kitty"
}

我收到“无法解析组件:q-btn”
screenshot
JSX的工作方式如“test”字符串所示
类星体组件的工作原理如“BUTN”所示
我发现了这个:https://github.com/quasarframework/quasar/issues/7672
https://codesandbox.io/s/magical-dew-mybq9?file=/package.json
还有这个
https://codesandbox.io/s/53ki6?file=/src/App.tsx
两者都在沙箱中工作,但我无法让它们在本地工作

wko9yo5t

wko9yo5t1#

解决方案是在quasar.config.js中导入组件

相关问题