vite + vue3 + jsx + ts 配置一个小项目

原文链接: vite + vue3 + jsx + ts 配置一个小项目

上一篇: js 继承中 同名方法的调用问题

下一篇: threejs 入门 绕定点旋转和自旋

配置参考, 我用的不多, 只需要jsx相关即可

https://github.com/lduoduo/vue3-project-dodo

https://segmentfault.com/a/1190000023267394

https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx

https://zhuanlan.zhihu.com/p/153387704

主要目的是在vue3中使用jsx语法

vite配置jsx后好像不能和vue模板共存, 但是cli是可以两个一起使用的, 也可能是我配置有些问题...不想搞了, 配起来确实麻烦

vue/cli

vue-cli 是可以直接用的

vite

安装

npm init @vitejs/app vite-vue3-ts-jsx --template vue-ts
yarn add @vue/babel-plugin-jsx
yarn add @vitejs/plugin-vue-jsx

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};

vite.config.ts

// vite.config.js
import vueJsx from "@vitejs/plugin-vue-jsx";
console.log("vueJsx", vueJsx);
export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    }),
  ],
};

=========================================================================================

vite 目前没配成功, 参考上面todo可以跑起来, 但是感觉不靠谱... 还是用cli吧, vite的生态短时间内还是短板啊

创建ts项目

npm init @vitejs/app vite-vue3-ts-jsx --template vue-ts

添加配置文件babel.config.js, 直接复制上面todo项目中的相关配置文件, 注意vite是1.0版本的

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    "@vue/babel-plugin-jsx",
    "@babel/plugin-proposal-optional-chaining",
  ],
};

=========================================================================================

Counter.jsx

import { defineComponent, reactive } from "vue";
export default defineComponent({
  props: {
    initValue: Number,
  },
  setup(prop) {
    console.log("prop", prop);
    const state = reactive({
      count: prop.initValue,
    });
    const inc = () => state.count++;
    const dec = () => state.count--;
    return () => (
      <div>
        <p>{state.count}</p>
        <button onClick={inc}>inc</button>
        <button onClick={dec}>dec</button>
      </div>
    );
  },
});

使用和以前一样

<template>
  <Counter :initValue="10" />
</template>
<script>
import Counter from "./components/Counter";
export default {
  name: "App",
  components: {
    Counter,
  },
};
</script>