网站开发所需基础知识,网站按照谁建设 谁负责,公司logo在线设计,趣闲赚如果我掏出下图#xff0c;阁下除了私信我加入学习群#xff0c;还能如何应对#xff1f; 正文开始 前言一、下载资源二、利用vite工具引入babel插件总结 前言
最近在为部署人员开发辅助部署的工具#xff0c;技术栈是vue3viteelectron#xff0c;在使用jsx语法时#x…如果我掏出下图阁下除了私信我加入学习群还能如何应对 正文开始 前言一、下载资源二、利用vite工具引入babel插件总结 前言
最近在为部署人员开发辅助部署的工具技术栈是vue3viteelectron在使用jsx语法时提示我需要引入插件所以就找到了vue3vite项目引入jsx的方式。如果您的项目用vue-cli创建并自动支持jsx语法那么此篇文章对您无益。 一、下载资源
首先要下载我们需要的资源
安装jsx支持插件
npm install vue/babel-plugin-jsx -Dvite项目中没有babel.config.js配置所以按照babel-plugin-jsx官网的介绍是无法在vite中引入此插件的我们需要借助vite提供的工具vitejs/plugin-vue-jsx下载该插件 npm install --legacy-peer-deps vitejs/plugin-vue-jsx我的vite版本过低和此插件不兼容所以加了 --legacy-peer-deps参数如果不加此参数并不报错可不加。
二、利用vite工具引入babel插件
借助vite工具引入babel插件需要我们在vite.config.js中引入并使用插件vitejs/plugin-vue-jsx
import vueJsx from vitejs/plugin-vue-jsx
export default defineConfig({...plugins: [vue(),vueJsx({include:/\.[jt]xs$|\.js$/})],...})在引入插件的地方调用vueJsx注意需要维护include参数否则jsx插件默认的是只在.jsx/.tsx文件中生效。
做完这些就可以在vue3中愉快地使用jsx语法了。 总结
不知道为什么即使在include中维护了.vue也不能在.vue文件中使用jsx不过如果采用vue3组合式语法的规范开发正常情况下也不需要在vue文件中使用jsx。
