首页 前端知识 vue3 vite tsx 配置及使用

vue3 vite tsx 配置及使用

2024-08-19 22:08:22 前端知识 前端哥 271 922 我要收藏

以下在 vue3+vite+ts 基础上配置

配置

第一步 先安装 jsx 依赖 yarn add @vitejs/plugin-vue-jsx -d or npm i @vitejs/plugin-vue-jsx -d
安装完成后如果报vite.createFilter is not a function查看vite版本和安装的依赖版本是否一致。

第二步 在vite.config.ts文件中引入并使用jsx依赖。以下配置仅为了展示jsx配置展示,详细配置可查看 vite详细配置 或 vite官网;tsconfig.json include 配置添加.tsx。

  • jsx直接引入css文件少了sfc的scope会变成全局全局引入,vite使用了postcss-modules 可以开启模块化样式来避免样式冲突。样式命名需要加.modele,如果不想添加可参考 大佬博客。
  • jsx的dom中变量需要以单层大括号包裹。
  • 多层dom可以使用空标签包裹<></>
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import type { UserConfig, ConfigEnv  } from "vite";

export default ({command, mode}: ConfigEnv): UserConfig => {
	return {
	    css: {
	      modules: {
	        scopeBehaviour: 'local', // 'global' | 'local'
	      }
	    },
		plugins: [
	      vue(),
	      vueJsx()
	    ]
	}
}

tsconfig.json

{
	"include": [
    "src/**/*.tsx"
  ]
}

css配置完成后引入文件编辑器会爆红,可以在d.ts里面添加declare module '*.scss';使用方式:
.tsx文件引入

import styles from 'test.module.scss'

export default defineComponent({
  name: 'test',
  setup () {
    return () => (
      <div class={styles['test-wrap']}></div>
    )
  }
})

test.module.scss

.test-wrap{
  width: 80px;
  height: 20px;
  border: 1px solid #f0f0f0;
}

效果及dome
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

使用

jsx一些事件的写法及指令需要改写。

@click

@click 需要改成 onClick,当使用点击事件的时候需要写成onClick={(event) => toggleCate(event, data)}样式,当需要获取event事件时可以传值event不使用可为空。

v-if

if else语句在使用时需要以大括号包裹;

export default defineComponent({
  name: 'test',
  setup () {
    const status = ref(true)
    return () => (
      <>
        { 
          status.value ? <div>1</div> : <div>2</div>
        }
      </>
    )
  }
})

在这里插入图片描述

v-for
export default defineComponent({
  name: 'test',
  setup () {
    const list = [1, 2, 3, 4]
    return () => (
      <>
        <div class={styles['test-wrap']}></div>

        {
          list.map(item => (
            <div>{item}</div>
          ))
        }
      </>
    )
  }
})

在这里插入图片描述

v-slot

在jsx里面的插槽需要使用v-slots插入。如果有传值可以在箭头函数中接收。slot传值写入当发现未渲染时记得查看这个值是不是可输出的,如果是对象会直接显示为空。

const footerSlot = {
  footer: () => (<div>
    <el-button>取消</el-button>
    <el-button type="primary">确定</el-button>
  </div>)
}
return () => (
	<el-dialog v-model={visible.value} title="测试" v-slots={footerSlot} before-close={closeDialog}></el-dialog>
)
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16195.html
标签
评论
发布的文章

php保存

2024-08-27 16:08:00

jQuery NiceScroll 插件

2024-08-27 09:08:49

vue echart4.0 按需引入

2024-08-27 09:08:28

Taro3 Vue3使用echarts

2024-08-27 09:08:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!