• Vite 是伴随 Vue3 正式版一起发布的

  版本

• 1.0，以 Vue3 为主

• 2.0, 跨框架

  创建项目

• 创建 vite 项目

  yarn create vite

• 选择创建 vue 模版创建项目

• 直接通过附加命令创建模版

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

  运行项目

  使用命令运行项目

  npm run dev
  yarn dev

  启动本地服务即可访问项目

  修改 vite 配置 ip 访问项目

• vite 启动后出现 “ Network: use —host to expose ”

  vite v2.3.7 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose

• 是因为IP没有做配置，所以不能从IP启动，需要在 vite.config.js做相应配置：
  在 vite.config.js中添加 server.host 为 0.0.0.0

  export default defineConfig({
    plugins: [
        vue(),
        ],
    // 在文件中添加以下内容
    server: {
        host: '0.0.0.0'
    }
  })

• 重新启动后显示

  vite v2.3.7 dev server running at:
  > Local:    http://localhost:3000/
    > Network:  http://192.168.199.127:3000/

  在项目中使用 JSX

• 添加 [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) 插件

  yarn add @vitejs/plugin-vue-jsx

• 修改 vite 配置 ```javascript 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()], server: { host: “0.0.0.0”, }, });

- 在项目中创建 jsx 文件，并引入到页面
```javascript
import { defineComponent } from "vue";
export default defineComponent({
  setup(){
    return () =>{
      return <div>Hello vue3 jsx</div>
    }
  }
})

• 项目就可以解析 JSX 了