tsx零基础页面开发全流程（vue环境）

最新推荐文章于 2024-11-07 14:43:38 发布

前端呆头鹅

最新推荐文章于 2024-11-07 14:43:38 发布

阅读量7.4k

点赞数 10

分类专栏： VUE 文章标签：前端 tsx jsx vue vue3

本文链接：https://blog.csdn.net/weixin_45809580/article/details/130082939

版权

本文详细介绍了在Vue环境下使用tsx进行页面开发的全过程，包括页面布局、组件注册与使用、LogistTrackCard组件的绘制、动态数据的接入以及如何处理动态类和插槽的使用。通过实例展示了物流跟踪页面的创建，涵盖了从静态页面到动态数据展示的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一注册 tsx 页面

import {
    defineComponent } from "vue";

const logistTrack = defineComponent({
   
  setup(props, {
    slots }) {
   
    return () => <div>123</div>;
  },
});

export default logistTrack;

其次将该文件注册到 router 对象上。

import {
    RouteRecordRaw } from "vue-router";
export const myOrderRoutes: RouteRecordRaw = {
   
  path: "/service",
  children: [
    {
   
      path: "logistTrack",
      name: "logistTrack",
      meta: {
   
        title: "物流跟踪",
      },
      // 注意这里的后缀为js 而不是tsx
      component: () => import("@/views/myOrder/logistTrack/index.js"),
    },
  ],
};

运行，该页面展示 123。
请添加图片描述

二页面布局绘制

然后我们开始绘制页面，这次绘制的页面是物流追踪页面，整个页面分为上下两大块。这里我们开始引入样式。

新建样式文件。

// index.scss
.logist_track {
   
  background-color: #f6f6f6;
  .logist_track_title,
  .logist_track_content {
   
    margin: 18px 24px;
    background-color: #ffffff;
    border-radius: 24px;
  }
}

在 tsx 中引入并使用样式。

// @/views/myOrder/logistTrack/index.tsx
import {
    defineComponent } from "vue";
import "./index.scss";

const logistTrack = defineComponent({
   
  setup(props, {
    slots }) {
   
    return () => (
      <div class="logist_track" pageTitle="物流跟踪">
        <div class="logist_track_title">123</div>
        <div class="logist_track_content">456</div>
      </div>
    );
  },
});

export default logistTrack;

请添加图片描述

三注册并引入组件

我们计划将页面的上半部分划分为一个组件，接下来我们注册并引入一个组件。

新建一个组件。

import {
    defineComponent } from "vue";
import "./index.scss";

const LogistTrackCard = defineComponent({
   
  setup(props, {
    slots }) {
   
    return () => <div>我是一个组件</div>;
  },
});

export default LogistTrackCard;

在页面中引入并使用该组件。

import {
    defineComponent } from "vue";
import LogistTrackCard from "../components/LogistTrackCard/index";

import "./index.scss";

const logistTrack = defineComponent({
   
  setup(props, {
    slots }) {
   
    return () => (
      <div class="logist_track" pageTitle="物流跟踪">
        <div class="logist_track_title">
          <LogistTrackCard></LogistTrackCard>
        </div>
        <div class="logist_track_content">456</div>
      </div>
    );
  },
});

export default logistTrack;

现在页面展示如下：
请添加图片描述

三 LogistTrackCard 组件绘制

接下来在组件 LogistTrackCard 内绘制静态页面。
组件整体分为两部分，下面的部分分裂为横向排列的 2 块，各占 50%，由 flex 布局而成。
这块没什么难点，直接给出。

import {
    defineComponent } from "vue";
import "./index.scss";
import arrow_right_gray from "@/assets/icons/arrow_right.png";

const LogistTrackCard = defineComponent({
   
  setup(props, {
    slots }) {
   
    return () => (
      <div class="logist_track_card">
        <div class="title_group">
          <span class="lable">顺丰快递</span>
          <span>SF1223333333</span>
        </div>
        <div class="content">
          <div class="status_group">
            <div class="status">配送中</div>
            <div class="msg">预计3月24日22:00前送达</div>
          </div>
          <div class="line-splice">