在Vue 3的Vite项目中使用JSX,你需要按照以下步骤进行操作: 安装并配置Vite以支持Vue3项目: 首先,确保你已经使用Vite创建了一个Vue 3项目。如果还没有,可以通过以下命令创建一个新的Vite项目,并选择Vue作为框架: bash npm create vite@latest my-vue-app --template vue cd my-vue-app 安装并配置对JSX的支持...
// vite.config.ts import vueJsx from "@vitejs/plugin-vue-jsx"; export default { plugins: [vueJsx()] } 配置了vite.config.ts后虽然已经可以使用jsx,页面也正常渲染了,但是还是会提示无法使用jsx,此时还需要在tsconfig.ts中配置"jsx": "preserve"属性,就可以愉快的使用jsx形式来写vue了。 // tsconfig...
目录 一:npm构建 二:更改http://localhost:3000/到8080与Network路由访问 三:配置vite别名(npm install @types/node --save-dev) 四 :路由(npm install vue-router@4) 五:vuex(npm insta
npm i @vitejs/plugin-vue-jsx -D 安装完成之后在vite.config.ts进行一个配置即可 import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importvueJsxfrom"@vitejs/plugin-vue-jsx";// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),vueJsx()],}); 接下来我们看一...
随着Vue3的普及,已经有越来越多的项目开始使用Vue3。为了快速进入开发状态,在这里向大家推荐一套开箱即用的企业级开发脚手架,框架使用:Vue3+Vite2+TypeScript+JSX+Pinia(Vuex)+Antd。废话不多话,直接上手开撸。 该脚手架根据使用状态库的不同分为两个版本Vuex版、Pinia版,下面是相关代码地址: ...
2. vite.config.js 配置 import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' export default defineConfig({ plugins: [ vue(), vueJsx({ // .js结尾的文件,支持jsx语法 include: [/\.js$/] }) ] }) 3. 使用 defineComponent export default defineComponent({ nam...
vite.config.js是 Vite 的配置文件。 在Vue 3 中使用 JSX JSX 是一种 JavaScript 的语法扩展,允许你在 JavaScript 代码中编写类似 HTML 的标记。Vue 3 支持使用 JSX 来编写组件,这为开发者提供了更多的灵活性。 1. 安装必要的依赖 要在Vue 3 中使用 JSX,你需要安装@vue/babel-plugin-jsx插件。运行以下命令...
npm create vite@latest // or yarn create vite // 输入项目名称✔ Project name: my-vue-app // 选择框架,选择vue ✔ Select a framework: vue // 选择ts 或 js 或 Customize with create-vue // 选择js的则接着第三部分配置依赖✔ Select a variant: JavaScript // 也可以选择 Customize with ...
Vue 的类型定义也提供了 TSX 语法的类型推导支持。当使用 TSX 语法时,确保在tsconfig.json中配置了"jsx": "preserve",这样的 TypeScript 就能保证 Vue JSX 语法编译过程中的完整性。 安装插件(@vitejs/plugin-vue-jsx) vite 官方提供了官方的插件来支持在 vue3 中使用 jsx/tsx,直接安装就行。