Vue3/Vite2/TypeScript 练习

yarn create vite my-vue-app --template vue
yarn create vite my-vue-app --template vue-ts

setup语法糖：
https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95

<script setup>
    console.log('hello script setup')
</script>

[

](https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95)

JSX

https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md

Vue 用户应使用官方提供的 @vitejs/plugin-vue-jsx 插件，它提供了 Vue 3 特性的支持，包括 HMR，全局组件解析，指令和插槽。

npm i @vitejs/plugin-vue-jsx -D

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/lugin-vue-jsx";
export default defineConfig({
  plugins: [vue(), vueJsx()]
})

// Test.tsx
import { defineComponent, ref } from 'vue'
export default defineComponent({
    setup() {
        const count = ref(2);
        return { count }
    },
    render() {
        return <div>hello world{this.count}</div>
    }
})

可以使用render(函数返回 jsx（推荐），也可以直接在setup()直接返回

参考：

在Vue中使用JSX的正确姿势(有福利)