Vite는 Vue3 프로젝트를 생성하고 Vue3가 jsx를 사용하는 방법

Vue3 프로젝트를 생성하려면 Vite

Vite에는 Node.js 버전 >= 12.0.0이 필요합니다. (node -v 현재 노드 버전 확인) 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中使用jsx

Vite创建的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

yarn 사용: yarn create @vitejs/app

npm 사용:< code >npm init @vitejs/app

1. 프로젝트 이름을 입력하세요

여기에 프로젝트 이름을 입력하세요: vite-vue3

2 프레임워크를 선택합니다. h4>

여기서 통합에 필요한 프레임워크를 선택하세요: vue

• 

• vanilla: 기본 js, 프레임워크 통합 없음

vue: vue3 프레임워크, vue3만 지원🎜🎜🎜🎜react: React Framework🎜🎜 🎜🎜preact: 경량 반응 프레임워크🎜🎜🎜🎜lit-element: 경량 웹 구성 요소🎜🎜🎜🎜svelte: svelte 프레임워크🎜🎜🎜

3 다른 뷰를 선택하세요.

🎜여기에서 를 선택합니다. vue🎜🎜🎜

4. 프로젝트 생성 완료

🎜🎜

5. 프로젝트 구조

🎜프로젝트 구조는 매우 간단합니다: 🎜🎜🎜

6. 프로젝트 시작

🎜🎜🎜프로젝트 입력: cd vite- vue3🎜🎜🎜🎜종속성 설치: npm install🎜🎜🎜🎜프로젝트 실행: npm run dev 또는 npx vite 🎜 🎜🎜🎜컴파일 프로젝트: npm run build 또는 npx vite build🎜🎜🎜🎜시작 속도🎜매우 빠릅니다🎜:🎜🎜🎜🎜🎜🎜Vue3에서 jsx를 사용하여 생성된 Vue3 프로젝트🎜🎜Vite jsx를 직접 사용할 수는 없습니다. 이를 달성하려면 플러그인을 도입해야 합니다🎜

1. 플러그인 설치

🎜🎜🎜얀 사용: yarn add @vitejs/plugin-vue-jsx -D 🎜🎜🎜🎜npm 사용: npm i @vitejs/plugin-vue-jsx -D🎜🎜🎜

2. 플러그인 등록

🎜vite.config.js:🎜

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

3. 플러그인 사용

🎜🎜방법 1: App.vue 수정🎜🎜🎜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>

🎜 jsx를 사용하면 App.vue는 다음과 같습니다. 🎜

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

🎜🎜방법 2: App.vue를 삭제하고 새 App.jsx를 만듭니다🎜🎜🎜새 App.jsx 파일을 만듭니다🎜

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

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

🎜 그런 다음 소개 부분을 수정합니다. main.js🎜🎜'./App.vue'에서 앱 가져오기가 './App'에서 앱 가져오기로 변경되었습니다🎜rrreee🎜Note🎜🎜🎜🎜 저장 시 eslint 검증을 지원하지 않습니다🎜🎜🎜🎜 Webpack, Vite의 컴파일 항목은 Javascript 파일이 아닙니다. 대신 index.html이 컴파일 항목으로 사용됩니다. index.html에서는 를 통해 main.js가 로드됩니다. 이때 요청은 vite🎜의 서비스 계층에 도달합니다. 🎜🎜

위 내용은 Vite는 Vue3 프로젝트를 생성하고 Vue3가 jsx를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!