vite创建vue3项目vite 需要 node.js 版本 >= 12.0.0。（node -v 查看自己当前的node版本）
使用 yarn：yarn create @vitejs/app
使用 npm：npm init @vitejs/app
1. 输入项目名称这里输入我们的项目名称：vite-vue3
2. 选择框架这里选择我们需要集成的框架：vue
vanilla：原生js，没有任何框架集成
vue：vue3框架，只支持vue3
react：react框架
preact：轻量化react框架
lit-element：轻量级web组件
svelte：svelte框架
3. 选择不同的vue这里我们选择：vue
4. 项目创建完成
5. 项目结构项目结构非常简单：
6. 启动项目进入项目：cd vite-vue3
安装依赖：npm install
运行项目：npm run dev 或 npx vite
编译项目：npm run build 或 npx vite build
启动速度极快：
vue3中使用jsxvite创建的vue3项目中是无法直接使用jsx 的，需要引入插件来实现
1. 安装插件使用 yarn：yarn add @vitejs/plugin-vue-jsx -d
使用 npm: npm i @vitejs/plugin-vue-jsx -d
2. 注册插件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. 使用插件方法一：修改app.vue
不使用 jsx，app.vue是这样：
<script setup>import helloworld from './components/helloworld.vue';</script><template> <img alt="vue logo" src="./assets/logo.png" /> <helloworld msg="hello vue 3 + vite" /></template>
使用 jsx，app.vue是这样：
<script lang="jsx">import { definecomponent } from 'vue';import helloworld from './components/helloworld.vue';import logo from './assets/logo.png';export default definecomponent({ render: () => ( <div> <img alt="vue logo" src={logo} /> <helloworld msg="hello vue 3 + vite" /> </div> ),});</script>
方法二：删除app.vue，新建app.jsx
新建app.jsx文件
import { definecomponent } from 'vue';import helloworld from './components/helloworld.vue';import logo from './assets/logo.png';export default definecomponent({ setup () { return () => { return ( <div> <img alt="vue logo" src={logo} /> <helloworld msg="hello vue 3 + vite" /> </div> ) } }});
再修改main.js的引入
import app from './app.vue' 改为 import app from './app'
import { createapp } from 'vue'import app from './app'createapp(app).mount('#app')
注意不支持eslint在保存时，做eslint校验
与webpack不同，vite的编译入口不是javascript文件，而是以index.html作为编译入口。在index.html中，通过105982557a226c4a8e55eee8814b09ba2cacc6d41bbb37262a98f745aa00fbf0加载main.js，这时请求到达了vite的serve层
以上就是vite创建vue3项目及vue3使用jsx的方法的详细内容。