下面的代码:
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
两者都在沙箱中工作,但我无法让它们在本地工作
1条答案
按热度按时间wko9yo5t1#
解决方案是在quasar.config.js中导入组件