vue+tsx

最新推荐文章于 2024-04-28 15:24:12 发布

enhengcys

最新推荐文章于 2024-04-28 15:24:12 发布

阅读量463

点赞数

分类专栏：前端文章标签： vue typescript

本文链接：https://blog.csdn.net/enhengcys/article/details/111804344

版权

本文详细介绍了如何在Vue项目中使用tsx语法。通过Vue-cli创建项目后，删除默认内容，修改router的index.ts，新建App.tsx，并在src目录下创建pages文件夹，包含index.tsx和login子文件夹。最后，展示了tsx代码示例，完成Vue项目的基本结构搭建。

摘要由CSDN通过智能技术生成

在Vue中使用tsx语法进行项目构建

首先进行Vue项目的搭建，想必大家都会使用Vue-cli进行项目的搭建，这里我给大家说一下步骤：

使用 vue create vue-tsx进行项目创建,我选择自定义进行创建
接着选择自己在项目中需要用到的一些插件和预处理器，这个我就不说明了，不明白的可以去查一查如何使用vue-cli进行创建vue项目。
删除views文件夹，删空components文件夹中的内容保留文件夹，删除App.vue文件。
接着修改router下的index.ts文件：

import Vue from "vue";
import VueRouter, {
    RouteConfig } from "vue-router";
import Index from "../pages/index";

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
   
    path: "/",
    name: "index",
    component: Index,
  },
  {
   
    path