Vue3拓展：整合JSX与CSS-in-JS

在项目中，我们有时需要封装一些组件，为了高内聚，我们有时可以把文件都写法一个js文件中。vite官方给我们提供了jsx写法插件 @vitejs/plugin-vue-jsx，并且可以随便找个css in js 库，这里我用@styils/vue

使用插件步骤：

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

//vite.config.js// 引入jsx官方插件import vueJsx from '@vitejs/plugin-vue-jsx'export default defineConfig({  plugins: [    //更多配置看github  	vueJsx({      include:/\.[jt]s$/     })  ]})

示例：

// App.vue<template>  <div>    <el-button @click="Alerst" type="primary">弹框</el-button>  </div></template><script setup>import { alert } from './utils/Alert'const messageProp = '弹出框数据'const Alerst = () => {  alert(messageProp)}</script>

// src/utils/Alert/index.jsimport { render } from 'vue'import { styled } from '@styils/vue';export const alert = (propsData) => {  //创建一个有样式div  const Mydiv = styled('div', {    position: "fixed",    top: '50%',    left: '50%',    transform: 'translate(-50%,-50%)',  })    const container = document.createElement('div')    document.body.appendChild(container)    const VNode = (      <Mydiv>   //替换原来没有样式的<div>        <h1>登录成功</h1>          <p>{propsData}</p>          <button onClick={() => {              container.remove();            }}>关闭</button>      </Mydiv>     )  render(VNode, container)}

效果