vue3搭建项目，tsx写法的注意事项

目录

1.搭建一个空项目

 2.手动配置router+pinia

 3.使用jsx开发，更像react      

4.jsx使用方法

5. 按需自动引入ElementPlus

 6.多环境搭建

gitee地址 

  https://gitee.com/liu--zicheng/vue3-templatehttps://gitee.com/liu--zicheng/vue3-template

1.搭建一个空项目

 npm init vite@latest

 选择vue项目，然后回车。就会搭建一个空项目，其中一些router，pinia，jsx等需要自己配置。

 如果不想自己配置也可以根据vue3官网进行使用。

npm init vue@latest

 选取自己项目使用到的模块进行配置。

 2.手动配置router+pinia

首先下载vue-router和pinia插件，然后在main.ts全局引入，并使用app.use进行全局注册。

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";

const app = createApp(App);
app.use(createPinia);
app.use(router);
app.mount("#app");

 3.使用jsx开发，更像react      

       yarn add @vitejs/plugin-vue-jsx

 然后需要在tsconfig.json中配置如下：

"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "React.Fragment",

然后vite.config.ts修改如下：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
});

4.jsx使用方法

        注意：jsx中ref是不会自动解包的，但是template中是可以的 ，其中一些原始写法在jsx写法中是有变化的。 比如：v-if 转为 三元运算符、v-for 变为  map遍历、{{}}=>{}

// jsx写法，这只能创建无状态的组件

import { ref } from "vue";

let v = ref<string>("我是jsx写法");

const renderDom = () => {
  return (
    <div>
      <div>{v.value}</div>
      <div>hellow tsx</div>
    </div>
  );
};

export default renderDom;

// 原始写法

<template>

  <div>{{ a }}</div>

</template>
<script setup lang="ts">

let a = ref<string>("我不是jsx写法");

</script>

要想创建有状态的组件，需要借助defineComponent和setup中间件，如果不使用setup，在内部写生命周期会警告，生命周期只能在setup中使用。tsx写法不在支持v-for和v-if等指令，学过react会比较熟悉，v-if替换成三元运算符（true？’‘：’‘），v-for替换成如下。具体写法如下：

import User from "@/api/user";
import {
  ref,
  onMounted,
  defineComponent,
  reactive,
  Ref,
  toRefs,
  isReactive,
} from "vue";
import { ElButton } from "element-plus";

export default defineComponent({
  setup() {
    let hh = ref("我是 HelloWorld 组件");
    let state1 = reactive<any>({
      data: [],
    });
    onMounted(async () => {
      await User.login("/api/query", { username: "llll" });
      const res = await User.req11("/api/data", { username: "llll" });
      state1.data.push(...res.data);
    });
    const change = () => {
      state1.data.push({ name: "7777" });
    };
    return () => {
      return (
        <>
          <div>{hh.value}</div>
          <ElButton onClick={change} type="primary">
            1231
          </ElButton>
          {state1.data.map((item: { name: string }) => {
            return <div>{item.name}</div>;
          })}
        </>
      );
    };
  },
});

在使用tsx时，我们不能想以前那样，组件三部分代码<template><script><style>。现在需要在组件外部定义css或者scss或less样式文件，命名：app.module.scss。

引入组件：import styles from '@/styles/app.module.scss'。

.module相当于css的作用域，避免全局污染。

使用：div class={styles.style}>内容 </div>

5. 按需自动引入ElementPlus

        elementPlus官网推荐使用这种方式。但是样式会丢失，然后我是将css通过script引入cdn链接，样式才生效。大哥们知道为什么，给小弟说一声。

  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

 6.多环境搭建

        在根目录，不是在src目录，否则不生效哦。其中也有许多的坑，莫名的报错等。

       1.、用@引入组件时会报错。解决方法：在vite.config.ts配置

 resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
        // extensions: [".js", ".json", ".ts"],
        // 使用路径别名时想要省略的后缀名，可以自己 增减
      },
    },

         2、在使用import.meta.env.VITE_RES_URL，访问自己定义的变量时，会爆红。解决方法：需要在vite-env.d.ts中配置。

declare global {
  interface ImportMeta {
    env: Record<string, unknown>;
  }
}