vue3 + tsxをはじめる

##vue-cli3のインストール

$ RUN npm install -g @vue/cli@next

プロジェクト作成

$ vue create プロジェクト名

→Manually select features
次
→◉ Choose Vue version
→◉ Babel
→◉ TypeScrip
→◉ Router
次
→❯ 3.x (Preview)
→以降yですすめる

App.vueを編集

App.vue

<script lang="tsx">
import { defineComponent } from "vue";
import MainMenu from "@/components/MainMenu.vue"; // @ is an alias to /src

export default defineComponent({
  setup() {
    return () => (
      <div>
        <router-view />
      </div>
    )
  }
});

router/index.tsを編集

router/index.ts

const routes: Array<RouteRecordRaw> = [
  { path: "/", redirect: "/home" },
  {
    path: "/home",
    name: "Home",
    component: Home,
  },
  {
    path: "/page1",
    name: "Page1",
    component: () => import(/* webpackChunkName: "about" */ "../views/Page1.vue"),
  },
];

views/Home.vueを編集

views/Home.vue

<script lang="tsx">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const message = ref("homeです");
    return () => (
      <div class="home">
        {message.value}
        <router-link to="page1">Page1</router-link>
      </div>
    );
  },
});
</script>

views/Page1.vueを編集

views/Page1.vue

<script lang="tsx">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const message = ref("page1です");
    return () => (
      <div class="home">
        {message.value}
        <router-link to="home">Home</router-link>
      </div>
    );
  },
});
</script>

index.htmlに以下を追加しておく

<style>
* {
    margin: 0px;
    padding: 0px;
}
</style>