Vite による Vue3 プロジェクトの作成と Vue3 による jsx の使用方法

Vite は Vue3 プロジェクトを作成します

Vite には Node.js バージョン >= 12.0.0 が必要です。 (node -v 現在のノードのバージョンを確認してください)

• 糸を使用します: yarn create @vitejs/app

• npm を使用します: npm init @vitejs/app

1. プロジェクト名を入力してください

ここに入力してくださいプロジェクト名: vite-vue3

2. フレームワークを選択します

ここで、統合する必要があるフレームワークを選択します: vue

• バニラ: ネイティブ JS、フレームワーク統合なし

• vue: vue3 フレームワーク、vue3

• #react: 反応フレームワーク

• preact: 軽量反応フレームワーク

• lit のみをサポートします。 -element: 軽量 Web コンポーネント

• svelte: svelte Framework

3. 別の vue を選択してください

ここで選択します:

vue

4. プロジェクトの作成が完了しました

5. プロジェクトの構造

プロジェクトの構造は非常にシンプルです:

6. プロジェクトを開始します

• プロジェクトを入力します:

  cd vite -vue3

• 依存関係をインストールします:

  npm install

##プロジェクトを実行します:
• npm run dev

  または npx vite

  ##プロジェクトをコンパイルします:
npm run build
• または

  npx vite build

  起動速度
非常に速い

:

#Vue3でjsxを使用する

Vite で作成した Vue3 プロジェクトでは、jsx を直接使用することはできません。実現するにはプラグインを導入する必要があります。

1. プラグインをインストールします。

使用します。糸:

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. プラグインを使用します

方法 1:

App.vue

を変更する jsx を使用しない場合、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>

jsx を使用すると、App.vue は次のようになります。

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

方法 2: App.vue を削除し、新しい App.js を作成しますxx

新しい 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 src="/static/imghw/default1.png"  data-src="/src/main.js"  class="lazy"  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')

Note

保存時に eslint をサポートしていないため、eslint 検証を行ってください

Webpack とは異なり、Vite のコンパイル エントリは Javascript ファイルではありませんが、index.html はコンパイルエントリとして使用されます。 Index.html では、 を通じて main.js が読み込まれます。このとき、リクエストは Vite# のサービス層に到達します。

• ##

以上がVite による Vue3 プロジェクトの作成と Vue3 による jsx の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。