TDesign了解及使用

文章目录

        • 1、概述
        • 2、快速开始
          • 2.1使用 npm 安装
          • 2.2通过 浏览器引入 安装
          • 2.3、使用
        • 3、简单案例
          • 3.1 路由创建
          • 3.2、 页面创建
          • 3.3、 Table组件
          • 3.4、序号展示
          • 3.5、 图片展示及预览
          • 3.6、 性别字段处理

1、概述

TDesign 是腾讯推出的设计系统,旨在提供一致的设计语言和视觉风格,帮助用户形成连续、统一的体验认知。

主要特点:

  • 提供了丰富的 UI 组件库,方便开发者快速构建界面。

  • 提供了一系列设计资产,如图标、颜色、字体等,方便设计师进行设计工作。

  • 详细的设计指南帮助设计师和开发者理解和应用 TDesign 的设计原则。

  • TDesign 强调一致的设计语言和视觉风格,确保用户在使用不同产品时能够获得一致的体验。

  • 官网地址:TDesign 官网

  • UI 组件库:TDesign Vue 组件库

  • 设计指南:TDesign 设计指南

  • 设计资产:TDesign 设计资产

2、快速开始

可以参考官方文档:快速搭建

安装

2.1使用 npm 安装

推荐使用 npm 方式进行开发

npm i tdesign-vue // 在 Vue 2.6 及以下使用
npm i tdesign-vue@naruto  // 在 Vue 2.7 使用
2.2通过 浏览器引入 安装

目前可以通过 unpkg.com/tdesign-vue 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。由于部分组件依赖了@vue/composition-api,除了像其他 Vue2 版本的组件库一样需要引入vue,还需要额外手动引入@vue/composition-api

<link rel="stylesheet" href="https://unpkg.com/tdesign-vue/dist/tdesign.min.css" />
<script src="https://unpkg.com/vue@2.6/dist/vue.js"></script>
<script src="https://unpkg.com/@vue/composition-api@1.7.0/dist/vue-composition-api.prod.js"></script>
<script src="https://unpkg.com/tdesign-vue/dist/tdesign.min.js"></script>
...
<script>Vue.use(TDesign);
</script>

请注意,我们不推荐使用这种方式,这样无法实现按需加载等优化手段,生产项目会直接受版本更新影响,同时也可能受到 CDN 的稳定性的影响。

npm package 中提供了多种构建产物,可以阅读 这里 了解不同目录下产物的差别。

2.3、使用

TDesign 提供了三种方式使用组件,具体使用方式如下

基础使用

基础使用会全量注册所有组件,如果您的项目大规模使用组件,请放心使用这种方式。

import Vue from 'vue';
import TDesign from 'tdesign-vue';// 引入组件库的少量全局样式变量
import 'tdesign-vue/es/style/index.css';Vue.use(TDesign);

按需引入使用

如果您对产物大小有严格的要求,可以通过 按需引入具体组件 的方式来使用。

借助 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具,可以达到按需引入的使用效果。

import { Button as TButton } from 'tdesign-vue';// 引入组件库的少量全局样式变量
import 'tdesign-vue/es/style/index.css';Vue.use(TButton);

通过插件按需使用

除此之外,也可以使用 unplugin-vue-componentsunplugin-auto-import 来实现自动导入:

如果是在 Vue 2.6 版本中使用 您仍需在项目引入组件库的少量全局样式变量及@vue/composition-api

如果是在 Vue 2.7 版本中使用 您不再需要在项目引入@vue/composition-api

import VueCompositionAPI from '@vue/composition-api';
// 引入组件库的少量全局样式变量
import 'tdesign-vue/es/style/index.css';Vue.use(VueCompositionAPI); // 必须是项目的第一个 use

并安装两个 unplugin 相关的第三方包

npm install -D unplugin-vue-components unplugin-auto-import

然后在 Webpack 或 Vite 对应的配置文件添加上述插件。

Vite

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';export default {plugins: [// ...AutoImport({resolvers: [TDesignResolver()],}),Components({resolvers: [TDesignResolver()],}),],
};

Webpack

const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { TDesignResolver } = require('unplugin-vue-components/resolvers');module.exports = {// ...plugins: [AutoImport.default({resolvers: [TDesignResolver()],}),Components.default({resolvers: [TDesignResolver()],}),],
};

TDesignResolver 支持的配置,可以点击此链接。

3、简单案例
  • 在创建的好项目中新增路由菜单
    • 主菜单:权限管理
    • 子菜单:用户管理和角色管理
  • 在用户管理菜单中新增组件,展示用户列表,如下效果
    • 使用TDesign中的table组件展示数据,并可以查看API列表来实现数据的展示(序号、性别)
    • 使用TDesign中的ImageViewer组件实现图片展示和预览

image-20231017220511693

3.1 路由创建

在src/router/modules目录下新建文件:permission.ts文件,内容如下:

import Layout from '@/layouts/index.vue'import HomeIcon from '@/assets/test-img/icon_menu_diaodu.svg'
import ModelIcon from '@/assets/test-img/icon_menu_zj.svg'export default [{path: '/permission',name: 'permission',component: Layout,redirect: '/permission/index',meta: {title: '权限管理',icon: HomeIcon},children: [{path: 'index',name: '用户管理',component: () => import('@/pages/permission/user/index.vue'),meta: {title: '用户管理',icon: ModelIcon}},{path: 'role-index',name: '角色管理',component: () => import('@/pages/permission/role/index.vue'),meta: {title: '角色管理',icon: ModelIcon}}]}
]
3.2、 页面创建

在src/pages下新建目录permissio,并且在permission下创建两个目录,分别是user和role,效果如下:

image-20231017222238004

在user目录下新增index.vue文件

3.3、 Table组件

打开TDesign组件中的Table组件,链接:https://tdesign.tencent.com/vue-next/components/table

找到基础表格image-20231017222640329

把代码拷贝到新建的index.vue文件中(全部拷贝),代码如下:

<template><t-space direction="vertical"><!-- 按钮操作区域 --><t-radio-group v-model="size" variant="default-filled"><t-radio-button value="small">小尺寸</t-radio-button><t-radio-button value="medium">中尺寸</t-radio-button><t-radio-button value="large">大尺寸</t-radio-button></t-radio-group><t-space><t-checkbox v-model="stripe"> 显示斑马纹 </t-checkbox><t-checkbox v-model="bordered"> 显示表格边框 </t-checkbox><t-checkbox v-model="hover"> 显示悬浮效果 </t-checkbox><t-checkbox v-model="tableLayout"> 宽度自适应 </t-checkbox><t-checkbox v-model="showHeader"> 显示表头 </t-checkbox></t-space><!-- 当数据为空需要占位时,会显示 cellEmptyContent --><t-tablerow-key="index":data="data":columns="columns":stripe="stripe":bordered="bordered":hover="hover":table-layout="tableLayout ? 'auto' : 'fixed'":size="size":pagination="pagination":show-header="showHeader"cell-empty-content="-"resizablelazy-load@row-click="handleRowClick"></t-table></t-space>
</template><script setup lang="jsx">
import { ref } from 'vue';
import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next';const statusNameListMap = {0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },1: { label: '审批失败', theme: 'danger', icon: <CloseCircleFilledIcon /> },2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> },
};
const data = [];
const total = 28;
for (let i = 0; i < total; i++) {data.push({index: i + 1,applicant: ['贾明', '张三', '王芳'][i % 3],status: i % 3,channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],detail: {email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],},matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],time: [2, 3, 1, 4][i % 4],createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],});
}const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);const columns = ref([{ colKey: 'applicant', title: '申请人', width: '100' },{colKey: 'status',title: '申请状态',cell: (h, { row }) => {return (<t-tag shape="round" theme={statusNameListMap[row.status].theme} variant="light-outline">{statusNameListMap[row.status].icon}{statusNameListMap[row.status].label}</t-tag>);},},{ colKey: 'channel', title: '签署方式' },{ colKey: 'detail.email', title: '邮箱地址', ellipsis: true },{ colKey: 'createTime', title: '申请时间' },
]);const handleRowClick = (e) => {console.log(e);
};const pagination = {defaultCurrent: 1,defaultPageSize: 5,total,
};
</script>

上述代码中,columns字段控制表头,for循环中展示的列表数据,目前展示的是案例中自带的内容,我们需要进行改造

  • for循环的作用就是data属性进行赋值,我们可以把之前案例的数据直接拷贝过来,删除for循环,最终data的数据为:
const data = ref([{"id": 1,"name": "谢逊","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg","gender": 1,"job": "班主任","entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"},{"id": 2,"name": "韦一笑","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg","gender": 1,"job": "班主任","entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"},{"id": 3,"name": "黛绮丝","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg","gender": 2,"job": "班主任","entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"},{"id": 4,"name": "殷天正","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg","gender": 1,"job": "班主任","entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"}
]);
  • 根据我们的原始数据,可以修改columns字段,如下效果:
//表头
const columns = ref([{ colKey: 'rowIndex', title: "序号" },{ colKey: 'name', title: '姓名' },{ colKey: 'image', title: '头像' },{ colKey: 'gender', title: '性别' },{ colKey: 'job', title: '职位' },{ colKey: 'entrydate', title: '入职时间' },{ colKey: 'updatetime', title: '更新时间' },
]);

改造完成后,目前的效果,如下:

image-20231017223528741

在上面的代码中,主要控制数据显示的是<t-table>标签,我们来详细说一下这个标签的内容

<t-tablerow-key="index"    :data="data"         :columns="columns":stripe="stripe":bordered="bordered":hover="hover":table-layout="tableLayout ? 'auto' : 'fixed'":size="size":pagination="pagination":show-header="showHeader"cell-empty-content="-"resizable@row-click="handleRowClick"
>
  • row-key
  • :data 数据源 (数组)
  • :columns 列配置(数组)
  • :stripe 是否显示斑马纹
  • :bordered 是否显示表格边框
  • :hover 是否显示鼠标悬浮状态
  • :table-layout 表格布局方式 可选项:auto/fixed
  • :size 表格尺寸
  • :pagination 分页配置, 用于模块内切换内容的控件
  • :show-header 是否显示表头
  • cell-empty-content 单元格数据为空时呈现的内容
  • resizable 是否允许调整列宽
  • @row-click 行点击时触发,泛型 T 指表格数据类型

table组件更多的api参考:https://tdesign.tencent.com/vue-next/components/table?tab=api

大家可以自己试着修改一下,查看效果

3.4、序号展示

目前列表中的序号是空白的,我们需要单独处理序号。

在table组件已经提供了序号的功能,有一个默认的字段rowIndex,我们只需要展示即可,默认从0开始

<t-table><template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
</t-table>
  • <t-table>标签对中的<template></template>可以单独来处理特殊的字段,标签对里面展示列表中的内容
  • #rowIndex中的rowIndex为默认字段
3.5、 图片展示及预览

目前图片展示的一个url链接,我们现在需要展示为图片,并且由预览功能

其实在TDesign中已经提供了对应的组件:ImageViewer

链接:https://tdesign.tencent.com/vue-next/components/image-viewer

找到缩略图图片查看器

image-20231017224436868

代码中需要修改两处,改为自己的图片地址

image-20231017224542472

最终的代码如下:

<template #image="{ row }"><div><div class="tdesign-demo-image-viewer__base"><t-image-viewer :images="[row.image]"><template #trigger="{ open }"><div class="tdesign-demo-image-viewer__ui-image"><img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" /><div class="tdesign-demo-image-viewer__ui-image--hover" @click="open"><span><BrowseIcon size="1.4em" /> 预览</span></div></div></template></t-image-viewer></div></div>
</template>

其中 #image="{ row }"中,image是字段名字,row代表整行数据

3.6、 性别字段处理

目前性别展示的还是1或2,我们最终希望展示的男或女,这个处理,我们只需要通过插值表达式即可解决

代码如下:

<template #gender="{ row }">{{ row.gender == 1 ? '男' : '女' }}</template>

附最终代码,如下:

<template><t-space direction="vertical"><!-- 按钮操作区域 --><t-radio-group v-model="size" variant="default-filled"><t-radio-button value="small">小尺寸</t-radio-button><t-radio-button value="medium">中尺寸</t-radio-button><t-radio-button value="large">大尺寸</t-radio-button></t-radio-group><t-space><t-checkbox v-model="stripe"> 显示斑马纹 </t-checkbox><t-checkbox v-model="bordered"> 显示表格边框 </t-checkbox><t-checkbox v-model="hover"> 显示悬浮效果 </t-checkbox><t-checkbox v-model="tableLayout"> 宽度自适应 </t-checkbox><t-checkbox v-model="showHeader"> 显示表头 </t-checkbox></t-space><!-- 当数据为空需要占位时,会显示 cellEmptyContent --><t-table row-key="index" :data="data" :columns="columns" :stripe="stripe" :bordered="bordered" :hover="hover":table-layout="tableLayout ? 'auto' : 'fixed'" :size="size" :pagination="pagination" :show-header="showHeader"cell-empty-content="-" resizable lazy-load @row-click="handleRowClick"><template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template><template #image="{ row }"><div><div class="tdesign-demo-image-viewer__base"><t-image-viewer :images="[row.image]"><template #trigger="{ open }"><div class="tdesign-demo-image-viewer__ui-image"><img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" /><div class="tdesign-demo-image-viewer__ui-image--hover" @click="open"><span><BrowseIcon size="1.4em" /> 预览</span></div></div></template></t-image-viewer></div></div></template><template #gender="{ row }">{{ row.gender == 1 ? '男' : '女' }}</template></t-table></t-space>
</template><script setup lang="jsx">
import { ref } from 'vue';
const data = ref([{"id": 1,"name": "谢逊","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg","gender": 1,"job": "班主任","entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"},{"id": 2,"name": "韦一笑","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg","gender": 1,"job": "班主任","entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"},{"id": 3,"name": "黛绮丝","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg","gender": 2,"job": "班主任","entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"},{"id": 4,"name": "殷天正","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg","gender": 1,"job": "班主任","entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"}
]);
const total = 28;
const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);//表头
const columns = ref([{ colKey: 'rowIndex', title: "序号" },{ colKey: 'name', title: '姓名' },{ colKey: 'image', title: '头像' },{colKey: 'gender', title: '性别'},{ colKey: 'job', title: '职位' },{ colKey: 'entrydate', title: '入职时间' },{ colKey: 'updatetime', title: '更新时间' },
]);const handleRowClick = (e) => {console.log(e);
};const pagination = {defaultCurrent: 1,defaultPageSize: 5,total,
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470311.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

11Java面向对象高级(篇2,Java程序的核心套路!!!!)

更多java知识请点击上面专栏&#xff01;&#xff01;&#xff01; 修道之始&#xff1a; 01Java基础入门(纯小白也能入门&#xff0c;速通Java&#xff0c;知识点归纳超级全面&#xff01;&#xff01;&#xff01;2024版后端成仙起始篇&#xff01;&#xff01;&#xff01;…

定时器(QTimer)与随机数生成器(QRandomGenerator)的应用实践——Qt(C++)

一、QTimer与QRandomGenerator &#xff08;一&#xff09;QTimer&#xff08;定时器&#xff09;[2] QTimer类为定时功能提供了一个高级编程接口。在使用QTimer时&#xff0c;实例化一个QTimer对象并将其timeout()发射信号与合适的信号槽相连接。通过调用QTimer的start()函数…

翼鸥教育:从OceanBase V3.1.4 到 V4.2.1,8套核心集群升级实践

引言&#xff1a;自2021年起&#xff0c;翼鸥教育便开始应用OceanBase社区版&#xff0c;两年间&#xff0c;先后部署了总计12套生产集群&#xff0c;其中核心集群占比超过四分之三&#xff0c;所承载的数据量已突破30TB。自2022年10月&#xff0c;OceanBase 社区发布了4.2.x 版…

AI绘画经验(stable-diffusion)

提示词理解 总的 AI绘画的优点是【想象力】&#xff0c;而不是自然语言的精确描述。 AI绘画只能控制【主体】和【风格】&#xff0c;姿势&#xff0c;表情&#xff0c;装饰&#xff0c;手指都太过于详细了。这也是【人类画师的魅力】 准确描述是徒劳的&#xff0c;只能通过【…

使用支付宝沙箱完成商品下单

使用支付宝沙箱完成商品下单 一&#xff1a;效果展示&#xff1a; 二&#xff1a;代码实现 1&#xff1a;准备工作&#xff1a; 申请支付宝沙箱账户&#xff1a; 登录 - 支付宝 然后要下载密钥密钥工具来生成密钥&#xff1b; 2&#xff1a;流程分析&#xff1a; 先是用户…

Linux设置socks代理

公司里绝大多数主机已经禁止外网访问&#xff0c;仅保留一台主机设置socks作为代理服务器。如下为对socks这一概念的学习整理 什么是socks 是OSI模型下会话层的协议&#xff0c;位于表示层与传输层之间&#xff0c;作用是&#xff1a; exchanges network packets between a c…

以往运维岗本人面试真题分享

以下是本人面试运维岗的一些面试经历&#xff0c;在此做个记录分享 目录 TCP/IP三次握手 IPtables IPtables四表五链都是什么&#xff1f; nat端口如何做&#xff1f; 开放本机的80端口该如何做&#xff1f; 如何在单用户模式下引导Centos&#xff1f; nginx轮询模式都有…

【Hadoop实训】Hive 数据操作①

目录 一、准备文件 1、创建表 2、 数据映射 二、HIVE的数据操作 1、基本查询 a、全表查询 b、选择特定字段查询 c、查询员工表总人数 d、查询员工表总工资额 e、查询5条员工表的信息 2、Where条件查询 a、查询工资等于5000的所有员工 b、查询工资在500到1000的员工信息 …

3.5【数据库系统】ER图

2、实体之间的关系 下面主要针对两个实体间的关系进行介绍 &#xff08;a&#xff09;一对一联系&#xff08;1:1&#xff09;如班级和班长&#xff0c;一个班级只有一个班长&#xff0c;一个班长只能在一个班级任职。 &#xff08;b&#xff09;一对多联系&#xff08;1&#…

笔记 | image may have poor performance,or fail,if run via emulation

在Docker Desktop中现象如图&#xff1a; 当你运行 AMD64 平台代码时&#xff08;Intel 和 AMD 芯&#xff09;&#xff0c;你的 Mac 必须模拟其CPU架构&#xff08;因为你自身是ARM&#xff09;。这通常会非常吃性能。 Docker Desktop 警告你在模拟 Intel/AMD x64 CPU 时性能可…

想租用显卡训练自己的网络?AutoDL保姆级使用教程(PyCharm版)

各位小伙伴们大家好~ 不知道各位同学在科研过程中是否有这样的苦恼 电脑无显卡。难不成我要用CPU跑实验吗&#xff1f;救救我吧电脑显卡算力太低。训练过程慢慢慢慢慢&#xff0c;等半天都出不来结果电脑显卡显存不够&#xff0c;batchsize稍微高一点点&#xff0c;就要爆显存…

Linux相关习题-gcc-gdb-冯诺依曼

1.将一个test.c文件仅仅进行汇编而不生成可执行程序的命令是&#xff1f; A.gcc -S test.c B.gcc -E test.c C.gcc -c test.c D.gcc test.c gcc常见选项&#xff1a; -c 汇编完成后停止&#xff0c;不进行链接 -E 预处理完成后停止&#xff0c;不进行编译 -S 编译完成后停止…

计算机毕业设计必看必学35755flask旅游景区热度可视化平台原创定制程序,java、PHP、python、小程序、文案全套、毕设成品等

flask旅游景点热度可视化平台 摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对旅游景点热度…

Hadoop(环境搭建篇)

这里我用的是ubnatu22.4的系统&#xff0c;请大家严格按照这个系统来安装 一、网络设置 1、打开虚拟机的编辑&#xff0c;并选择虚拟网络编辑器 2、点击更改设置 3、更改IP 二、更改主机名 1、打开终端 2、输入以下命令 hostnamectl set-hostname master 3、然后关闭终端在…

Java 堆内存管理详解:`-Xms` 和 `-Xmx` 参数的使用与默认内存设置

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

Linux探秘坊-------1.系统核心的低语:基础指令的奥秘解析(1)

1.Linux的背景介绍 Linux 操作系统的发展历程充满了激情与创新喵&#xff5e;&#x1f380; 萌芽期 (1983 - 1991)&#xff1a;Linux 的历史可追溯到 1983 年&#xff0c;理查德斯托曼 (Richard Stallman) 发起 GNU 计划&#xff0c;目标是创建一个自由软件操作系统。1987 年发…

AI写作(二)NLP:开启自然语言处理的奇妙之旅(2/10)

一、NLP 的基本概念与任务 &#xff08;一&#xff09;自然语言处理的研究对象 自然语言处理&#xff08;NLP&#xff09;处于计算机科学、人工智能和语言学的交叉领域。它所聚焦的人类社会语言信息是无比丰富和复杂的&#xff0c;包括口语、书面语等各种形式。这种语言信息在…

使用CubeMX一键配置Freertos

一、配置参数 1.1 API信息 1.2 版本信息 版本信息 FreeRTOS版本为10.3.1 CMSIS-RTOS 版本为2.00 如果我们不用CubeMX配置的话 还是推荐移植正点原子的&#xff0c;因为它的裁剪头文件比较清晰 就是那个conf的头文件&#xff0c;一键配置的话很方便。可能会跟原版移植的Freert…

如何提高自动驾驶中惯性和卫星组合导航pbox的精度?

Mems纯惯导里程推算精度做到千分之一&#xff0c;两分钟航向精度保持0.001弧度&#xff0c;是如何做到的&#xff1f; 【飞迪sigma车规高精度组合导航系统在3.6km长隧道下穿测试&#xff0c;135s纯惯导航向保持精度小于0.06度&#xff0c;隧道内转弯轨迹和直线航位推算重合#智能…

10款PDF翻译工具的探索之旅:我的使用经历与工具特色!!

在如今的时代&#xff0c;PDF文件已经成为我们工作、学习和生活中不可或缺的一部分。但是&#xff0c;当遇到一些非母语或陌生语言的PDF文档时&#xff0c;这要怎么办呀&#xff01;这时候翻译工具就显得尤为重要了。这也是我所遇到过的难题&#xff0c;现在我将与大家分享几款…