Vite 创建一个Vue3项目

Vite1.0 为vue3而生
Vite2.0 跨框架，流行版本，内部不包含框架相关内容，通过插件提供不同开发框架的功能

vite中index.html 是必须的，html里引入入口文件的js script之后，vite的server就对其进行解析

1. 脚手架初始化项目，安装依赖

npm init @vitejs/app
yarn // 安装依赖用yarn, npm有时安装esbuild有问题
yarn add @vitejs/plugin-vue-jsx // 支持jsx语法

2. 配置config支持jsx
   vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJSX from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJSX()]
})

3. 创建jsx组件，修改入口文件

App.jsx

import { defineComponent } from "vue";
export default defineComponent({
    setup() {
        return () => <div>vite app jsx</div>
    }
})

main.js

import { createApp } from 'vue'
// import App from './App.vue'
import App from './App.jsx'
createApp(App).mount('#app')