Vite creates Vue3 projects and how Vue3 uses jsx

Vite creates a Vue3 project

Vite requires Node.js version >= 12.0.0. (node -v Check your current node version)

• Use yarn: yarn create @vitejs/app

• Use npm: npm init @vitejs/app

1. Enter the project name

Enter us here Project name: vite-vue3

2. Select the framework

Here select the framework we need to integrate: vue

• vanilla: native js, without any framework integration

• vue: vue3 framework, Only supports vue3

• react: react framework

• preact: lightweight react framework

• lit -element: lightweight web component

• svelte: svelte framework

3. Choose a different vue

Here we Select: vue

4. Project creation completed

5. Project structure

The project structure is very simple:

6. Start the project

• Enter the project:cd vite-vue3

• Install dependencies: npm install

• ##Run the project:

  npm run dev Or npx vite

##Compile project:
• npm run build

  or npx vite build

Startup speed

Extremely fast

:

##Using jsx in Vue3

jsx cannot be used directly in the Vue3 project created by Vite. You need to introduce a plug-in to achieve it

1. Install the plug-in

Use yarn:

yarn add @vitejs /plugin-vue-jsx -D

• Use npm:
npm i @vitejs/plugin-vue-jsx -D

• 2. Register the plug-in

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. Use the plug-in

Method 1: Modify

App. vue

Without jsx, App.vue

looks like this:

<script setup>
import HelloWorld from &#39;./components/HelloWorld.vue&#39;;
</script>

<template>
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

Using jsx, App.vue looks like this:

<script lang="jsx">
import { defineComponent } from &#39;vue&#39;;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;;
import logo from &#39;./assets/logo.png&#39;;

export default defineComponent({
    render: () => (
        <div>
            <img src="/static/imghw/default1.png"  data-src="/src/main.js"  class="lazy"  alt="Vue logo" src={logo} />
            <HelloWorld msg="Hello Vue 3 + Vite" />
        </div>
    ),
});
</script>

Method 2: Delete App.vue and create a new App.jsx

Create a new App.jsx file

import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import logo from './assets/logo.png';

export default defineComponent({
    setup () {
        return () => {
            return (
                <div>
                    <img src="/static/imghw/default1.png"  data-src="/src/main.js"  class="lazy"  alt="Vue logo" src={logo} />
                    <HelloWorld msg="Hello Vue 3 + Vite" />
                </div>
            )
        }
    }
});

Modify the introduction of main.js

import App from './App.vue' changed to import App from './App'

import { createApp } from 'vue'
import App from './App'

createApp(App).mount('#app')

Note

Does not support eslint when saving, do eslint Verification

• Different from Webpack, Vite’s compilation entry is not a Javascript file, but index.html is used as the compilation entry. In index.html, main.js is loaded through . At this time, the request reaches the service layer of Vite

The above is the detailed content of Vite creates Vue3 projects and how Vue3 uses jsx. For more information, please follow other related articles on the PHP Chinese website!