Vite mencipta projek Vue3 dan cara Vue3 menggunakan jsx

Vite mencipta projek Vue3

Vite memerlukan Node.js versi >= 12.0.0. (node -v Lihat versi nod semasa anda)

• Gunakan benang: yarn create @vitejs/app

• Guna npm: npm init @vitejs/app

1 Masukkan nama projek

Masukkan nama projek kami di sini: vite-vue3

2 rangka kerja

Di sini pilih rangka kerja yang perlu kami sepadukan: vue

• vanila: native js, tanpa sebarang penyepaduan rangka kerja

• vue: rangka kerja vue3, hanya menyokong vue3

• react: react framework

• preact: ringan Rangka kerja tindak balas terkuantisasi

• elemen terang: komponen web ringan

• langsing: rangka langsing

3. Pilih vue yang berbeza

Di sini kami memilih:vue

4 Penciptaan projek selesai

5. Struktur projek

Struktur projek sangat mudah:

6 >

Masukkan projek:

• cd vite-vue3

  Pasang kebergantungan:

• npm install

  Jalankan projek:
atau

• npm run devnpx vite

  Kompilasi projek:
atau

• npm run buildnpx vite build

  Kelajuan permulaan
Amat pantas

:

Menggunakan jsx dalam Vue3

Projek Vue3 yang dibuat oleh Vite tidak boleh menggunakan jsx secara langsung Anda perlu memperkenalkan pemalam untuk mencapainya ia

1 Pasang pemalam

Gunakan benang:

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

  Gunakan npm:

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

  2. Daftarkan pemalam

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 >

Kaedah 1: Ubah suai

Tanpa jsx, kelihatan seperti ini: App.vue

<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>

Menggunakan jsx, App.vue kelihatan seperti ini:

<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>

App.vueKaedah 2: Padam App.vue, Cipta App.jsx baharu

Buat fail App.jsx baharu

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>
            )
        }
    }
});

Ubah suai pengenalan utama. js

import Apl daripada './App.vue' untuk mengimport Apl daripada './App'

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

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

Nota

Tidak menyokong eslint apabila menyimpan, lakukan pengesahan eslint

• Tidak seperti Webpack, titik masuk kompilasi Vite bukanlah fail Javascript, tetapi index.html sebagai titik masuk kompilasi. Dalam index.html, main.js dimuatkan melalui Pada masa ini, permintaan mencapai lapisan servis Vite

Atas ialah kandungan terperinci Vite mencipta projek Vue3 dan cara Vue3 menggunakan jsx. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!