在tsx中 完全是一个ts文件的写法 *注意:vite 和 @vitejs/plugin-vue-jsx 版本号 是 一一对应的。 如:vite 4.3.9 版本 对应 @vitejs/plugin-vue-jsx 3.0.1 版本 1. 安装 (默认安装为最新版本) npm install @vitejs/plugin-vue-jsx -D 2. 在 tsconfig.json中 加上 { "compilerOptions": { "js...
import vueJsx from "@vitejs/plugin-vue-jsx"; // +新增 export default defineConfig({ plugins: [ vueJsx(),// +新增 ] }) 二、使用方法 1、插值表达式: //新增一个test1.tsx文件 import { defineComponent, ref } from "vue"; export default defineComponent({ setup() { const info = ref(...
样式的改造一度是我切换TSX的最大痛点，因为在SFC中最麻烦的是修改第三方库的样式，一般要用到:deep，...
1). 新建一个 .tsx 文件 import{defineComponent,ref}from'vue';exportconstApp=defineComponent({setup(){constrefCount=ref(0);constonClick=()=>{refCount.value+=1;}// 这里需要返回一个函数return()=>(<>{refCount.value}+1</>)}}) 2). 安装 @vitejs/plugin-vue-jsx 插件 pnpm i -D @vitejs/...
npm install @vitejs/plugin-vue-jsx -D 配置 在vite.config.ts 文件中挂载 import vueJsx from '@vitejs/plugin-vue-jsx' export default defineConfig({ plugins: [ vueJsx()] }) tsconfig.json 文件中 { // include 需要包含tsx "include": ["src/*", "src/**/*.vue", "src/**/*.tsx", ...
npm install @vitejs/plugin-vue-jsx -D 配置 在vite.config.ts文件中挂载 import vueJsx from '@vitejs/plugin-vue-jsx' export default defineConfig({ plugins: [ vueJsx()] }) tsconfig.json文件中 { // include 需要包含tsx "include": ["src/*", "src/**/*.vue", "src/**/*.tsx", "sr...
init" npm run prepare //package.json 中加入 { "lint-staged": { "*.{js,jsx,tsx,ts...
name: 'vite-plugin-xxx', //插件名称 load(code) { // 钩子逻辑 }, } 1. 2. 3. 4. 5. 6. 在插件命名方式上,如果插件是一个 npm 包,在package.json中的包命名也推荐以vite-plugin开头。一般情况下因为要考虑到外部传参,我们不会直接写一个对象,而是实现一个返回插件对象的工厂函数,如下代码所示:...
vite配置 上面jsx插件搞好就能在vue项目中使用jsx写法了 代码尝试 ChildWorld.vue import{defineComponent,defineProps}from"vue"constchildAbc=()=>{return(childAbc)}constchildCbd=(props,ctx)=>{console.log(props,ctx,"childCbd")const{emit}=ctx;setTimeout(()=>{//emit事件给父组件emit('listen',8888...
{// include: [// /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx// /\.vue$/,// /\.vue\?vue/, // .vue// /\.md$/ // .md// ],// imports: ['vue', 'vue-router', 'pinia'],// defaultExportByFilename: true,// vueTemplate: true,// dts: './types/auto-imports.d.ts...