12-Vite支持Vue3使用JSX原创

另外V对VIEW3的GSX也有支持，官网有一个插件叫做v JS plug in view jsx，有些时候呢，我们在VIEW3中也有使用GSX的场景，它比使用template要便捷一些，下面呢，我们就来看一下这个插件该如何使用。首先呢，我们打开这个插件的官方网站plug in view GSX，使用方法呢比较简单，我们直接通过NPM安装好wait JS plug in view jsx，然后把它引入进来，然后把这个插件放在我们wait con JS里边做一个配置就可以了。我们在Vs code里边去给大家演示一下，首先呢，我们打开终端，然后再去启动一下我们之前创建好的VI3的项目，我们执行一下PN PM run DV，我们首先得需要进入到这个项目的目录下面，执行一下CD wait basics。

然后再进入到view这个文件夹，执行PN PM run d，好，这个项目启动起来了，然后呢，我们在浏览器上面去打开它。打开以后呢，我们再次打开我们的v basic view啊这个项目，然后呢，我们试图的去使用一下GSX。解读完了以后，我们现在看到这是没有使用GSX的这样的一个项目，接下来呢，我们开始准备去安装啊，我们的GSX的插件，这个插件呢，名字叫v JS plug in view jsx，我们复制一下，然后回到我们命令行，CT出C，先出来执行一下PN PM install，然后我们在的开发环境里边去安装它，安装好了以后呢，接下来我们就可以准备去使用它了，使用的方法呢，打开我们的v con GS，在这里边呢，我们把这个插件先引入进来，引入的方法呢，就像这样，我们通过import把它当成是一个模块引入进来，那么view g sx呢，就是我们当前的插件的函数，然后呢，我们在plug in里边把它给执行一下，这样我们当前的这个，呃，所谓的GSX插件就安装好了，接下来呢，我们去编写一个所谓的GSX的一个组件。我们可以在。

在S2C下面创建一个新的文件，我们取名为叫做app.jsx那这个文件肯定是一个JSX的方式来编写一个view的组件了。我们可以使用view的。方法叫DeFine component，我们解构出一个DeFine component这样的一个方法，那它呢，可以通过呃一个函数去定义一个组件，这个组件的定义方法我们来看一下官方这个插件的一个介绍，我们可以通过类似于呃定义一个常量，然后呢，Export返回，或者直接export cost，或者是export def for都可以，但是我们不能直接export cost或者是cost，这种方法是不支持的。另外呢，我们也看到了这个插件呢，其实上事实上呢，是基于at view Bible plug in GSX，也就是它还是得需要用背去解析啊，我们JSX的代码的，那回到我们的JSS的这个组件，然后呢，我们接着就去编写一个符合规范的一个GXX的VIEW3的组件，那我们导入DeFine component以后我们去cost一个组件，比方说这个组件的名字呢，我们可以取。

名为叫做test，然后我们去调一下。Component这个函数，这个函数里边呢，我们直接可以配置呃一些所谓的呃这XX的一些方法了，那我们可以使用render函数来去构造一个GSX的一个模板，那我们可以写入render，然后render函数呢，本身返回的就是一个JSX了，我们在这里边呢，可以return一个JSX，那return的内容呢，我们可以用一个小括号里边呢，可以写个第五，然后呢，我们选择一个hello。

Wait，然后GSX component好了，这样的话呢，我们的这个GSX就写好了，写好以后我们试图的在APP点慢点JS里边去载入这个组件，我们可以把这个app.view先注释掉，然后呢，我们在载入刚才我们在这里面写入的GSX，我们呢没有去暴露，我们可以把它暴露一下，执行一下export，然后把test这个组件给暴露出去，然后在慢点JS里边，我们去从当前的一个叫做app.jsx里边解构出一个组件，叫做test。

然后呢，我们在create APP的时候呢，再把test传进去啊，保存一下，然后我们去运行一下我我们的项目，执行p PM run DA，好，运行完了以后呢，大家看到它已经自动刷新了，这里边显示出来了我们GSX里边定义的这个字符串，那GSX我们都知道，在RA里面呢，是呃，V1使用的一种方法，那我们在view里面可以使用template，当然也可以使用GSX。所以呢，我们可以让我们的view能够实现更加强大的一些模板渲染的功能。好，关于在V中使用view，我们就介绍这么多，大家加油。