vite配置

1、vue3中使用jsx

要安装babel pnpm add @babel/core@^7.19.0 然后安装pnpm add @vitejs/plugin-vue-jsx 接着在vite.config中使用：

import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({

  plugins: [

    vue(),

    vueJsx({

      // options are passed on to @vue/babel-plugin-jsx

    }),

  ],

})

最后将App.vue改成App.tsx,复制粘贴以下代码到App.tsx：

import HelloWorld from './components/HelloWorld.vue'

const App = defineComponent({
  setup() {
    const count = ref(0)

    const inc = () => {
      count.value++
    }

    return () => (
      <>
        <div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
        <HelloWorld />
      </>
    )
  },
})

export default App