欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中使用jsx的實(shí)現(xiàn)步驟

 更新時(shí)間：2023年07月06日 11:23:12   作者：jieyucx  
本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、使用vue-cli創(chuàng)建的項(xiàng)目中使用jsx語(yǔ)法

安裝Vue 3：使用Vue CLI創(chuàng)建一個(gè)新項(xiàng)目或通過(guò)npm安裝Vue。

配置Vue JSX插件：在創(chuàng)建的項(xiàng)目中，找到 babel.config.js 文件，添加以下插件配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 添加以下配置
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
}

創(chuàng)建基于JSX的組件：在 src 文件夾中創(chuàng)建一個(gè)新的 .jsx 文件，例如 MyComponent.jsx。

// 定義組件
export default {
  name: 'MyComponent',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  render() {
    return (
      <div>
        <h1>{this.msg}</h1>
      </div>
    )
  }
}

導(dǎo)入和使用組件：在其他組件中導(dǎo)入并使用自定義的基于JSX的組件。

<template>
  <div>
    <my-component msg="Hello Vue 3 JSX" />
  </div>
</template>
<script>
import MyComponent from './MyComponent.jsx'
export default {
  components: {
    MyComponent
  }
}
</script>

二、在vite創(chuàng)建的vue3項(xiàng)目中使用jsx

安裝插件

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

配置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()],
})

新建App.jsx組件

import { defineComponent } from "vue";
export default defineComponent({
    name: "App",
    setup() {
        return () => <div>App</div>
    }
})

在main.js中導(dǎo)入使用

import { createApp } from 'vue'
import App from './App'
createApp(App).mount('#app')

運(yùn)行項(xiàng)目

這樣就可以在Vue 3中使用JSX了

到此這篇關(guān)于vue3中使用jsx的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)vue3使用jsx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論