Golang + Vue3 + Tauri2.0 实现Linux系统监控软件-前端和Tauri2.0项目组件库、Prettier及相对路径配置

06-01 1485阅读

Golang + Vue3 + Tauri2.0 实现Linux系统监控软件-前端和Tauri2.0项目组件库、Prettier及相对路径配置

一、Element-Plus、Naive-ui和TDesign对比及组件库的选用

1. 背景与维护
2. 设计风格与定制
3. 组件丰富度与功能
4. 性能与体积
5. 技术生态与兼容性
6. 学习成本与文档
7. 适用场景
8. 总结对比
选择建议
实践
组件库的选用

由于TAURI2.0使用的vue前端框架，组件库配置和TypeScript配置相同
二、TDesign安装

1. [TDesign官网](https://tdesign.tencent.com/)
2. 安装TDesign
3. 配置按需引入
三、Prettier安装和配置

1. 安装Prettier
2. 配置Prettier

四、相对路径配置

一、Element-Plus、Naive-ui和TDesign对比及组件库的选用

1. 背景与维护

特性	Element Plus	Naive UI	TDesign
开发团队	饿了么团队	个人开发者（TuSimple 前员工）	腾讯团队
首次发布	2020 年（Element UI 的 Vue 3 升级版）	2021 年	2021 年
维护情况	更新频繁，社区活跃（GitHub 20k+ stars）	更新频繁，社区活跃（GitHub 16k+ stars）	更新频繁，腾讯技术团队支持
跨框架支持	仅 Vue 3	仅 Vue 3	Vue 3、React、Angular、小程序、Flutter

2. 设计风格与定制

特性	Element Plus	Naive UI	TDesign
默认风格	中性简洁，适合中后台（蓝白主题）	极简清新，高对比度，现代感强	现代圆角设计，符合腾讯设计规范
定制能力	支持 Sass 变量和主题工具，成熟但略复杂	基于 CSS 变量的深度定制，灵活性极高	Token 化主题系统，可视化配置工具
设计规范	无明确设计体系，偏实用主义	无固定规范，强调组件独立性	腾讯 TDesign 设计体系，强一致性

3. 组件丰富度与功能

特性	Element Plus	Naive UI	TDesign
组件数量	60+，覆盖全面（表格、表单、导航等）	80+，包含大量实用组件（如代码编辑器）	50+，侧重企业级场景（甘特图、审批流）
特色组件	复杂表格（虚拟滚动）、树形组件	代码编辑器、日志组件、高级表单控件	甘特图、数据可视化、审批流程组件
复杂场景支持	适合常规中后台需求	适合开发者工具、数据分析类应用	适合企业级复杂业务系统

4. 性能与体积

特性	Element Plus	Naive UI	TDesign
包体积	中等（压缩后约 200KB）	轻量（压缩后约 100KB）	较大（多框架支持增加复杂度）
按需加载	支持	原生支持，Tree-shaking 优化极佳	支持
性能优化	表格虚拟滚动、懒加载	极致轻量，无冗余依赖	虚拟滚动、动态加载

5. 技术生态与兼容性

特性	Element Plus	Naive UI	TDesign
框架支持	Vue 3	Vue 3	Vue 3、React、Angular、小程序等
TypeScript	支持	深度集成，类型提示完善	支持
移动端适配	无官方响应式方案	无官方响应式方案	提供响应式布局组件

6. 学习成本与文档

特性	Element Plus	Naive UI	TDesign
文档质量	中文文档完善，示例丰富	文档简洁，API 清晰，示例较少	文档详细，多框架示例齐全
社区资源	社区庞大，问题解决快	社区活跃但规模较小	依赖官方支持，腾讯内部案例多
学习曲线	低（Element UI 用户无缝迁移）	中等（灵活性强需适应）	低（设计规范统一）

7. 适用场景

库名	推荐场景
Element Plus	成熟中后台系统、快速开发、需要稳定社区支持的项目
Naive UI	轻量级应用、开发者工具、需要高度定制或极简设计的项目
TDesign	企业级复杂系统、多端统一（Web + 小程序）、遵循腾讯设计规范的项目

8. 总结对比

维度	Element Plus	Naive UI	TDesign
成熟度	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
灵活性	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
跨框架支持	❌	❌	⭐⭐⭐⭐⭐
企业级功能	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐
轻量化	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐

选择建议

优先 Element Plus

需要快速搭建中后台系统，依赖成熟生态和社区支持。

团队熟悉 Vue 2 的 Element UI，希望无缝迁移到 Vue 3。

优先 Naive UI

追求极致轻量、灵活定制，适合开发工具类或极简风格应用。

需要 TypeScript 深度集成或高级表单/编辑器组件。

优先 TDesign

企业级复杂系统，需多端统一（Web + 小程序）或腾讯生态集成。

强调整体设计规范一致性，且需要甘特图等业务组件。

实践

如果追求轻量灵活，可尝试 Naive UI + Vue 3。
如果团队技术栈多样（Vue + React），选择 TDesign 更高效。
对稳定性要求极高且无需跨端 → Element Plus。

组件库的选用

由于Tauri2.0支持移动端开发，后期有可能新增安卓和IOS的移动端开发，所以，这里使用腾讯的TDesign组件库保证组件的一致性

由于TAURI2.0使用的vue前端框架，组件库配置和TypeScript配置相同

二、TDesign安装

1. TDesign官网

2. 安装TDesign

pnpm i tdesign-vue-next

3. 配置按需引入

安装 unplugin-vue-components 和 unplugin-auto-import 来实现自动导入
```
pnpm install  unplugin-vue-components unplugin-auto-import -D
```

修改main.ts文件

import { createApp } from 'vue'
// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css'
import App from './App.vue'
createApp(App).mount('#app')

编辑vite.config.ts文件

import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { TDesignResolver } from "unplugin-vue-components/resolvers";
import vue from "@vitejs/plugin-vue";
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [
        TDesignResolver({
          library: "vue-next",
        }),
      ],
    }),
    Components({
      resolvers: [
        TDesignResolver({
          library: "vue-next",
        }),
      ],
    }),
  ],
});

三、Prettier安装和配置

1. 安装Prettier

pnpm i prettier -D

2. 配置Prettier

在项目根目录新建.prettierrc.cjs文件并写入以下内容

module.exports = {
    // 每行最大列，超过换行
    printWidth: 80,
    // 使用制表符而不是空格缩进
    useTabs: false,
    // 缩进
    tabWidth: 2,
    // 结尾不用分号
    semi: false,
    // 使用单引号
    singleQuote: true,
    // 在JSX中使用单引号而不是双引号
    jsxSingleQuote: true,
    // 箭头函数里面，如果是一个参数的时候，去掉括号
    arrowParens: 'avoid',
    // 对象、数组括号与文字间添加空格
    bracketSpacing: true,
    // 尾随逗号
    trailingComma: 'none'
}

四、相对路径配置

编辑vite.config.ts添加以下内容

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { TDesignResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [
        TDesignResolver({
          library: 'vue-next'
        })
      ]
    }),
    Components({
      resolvers: [
        TDesignResolver({
          library: 'vue-next'
        })
      ]
    })
  ],
    resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
})

如果__dirname爆红或path包找不到，在命令行中运行以下命令

pnpm i @types/node -D

编辑tsconfig.node.json没有的话编辑tsconfig.json添加以下内容

{
	"compilerOptions": {
		...
		"baseUrl": ".",
		"paths": {
			"@/*": [
				"./src/*"
			]
		},
		...
	},
	"include": [
		...
	]
}

Golang + Vue3 + Tauri2.0 实现Linux系统监控软件-前端和Tauri2.0项目组件库、Prettier及相对路径配置

（图片来源网络，侵删）

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Golang + Vue3 + Tauri2.0 实现Linux系统监控软件-前端和Tauri2.0项目组件库、Prettier及相对路径配置

Golang + Vue3 + Tauri2.0 实现Linux系统监控软件-前端和Tauri2.0项目组件库、Prettier及相对路径配置

一、Element-Plus、Naive-ui和TDesign对比及组件库的选用

1. 背景与维护

2. 设计风格与定制

3. 组件丰富度与功能

4. 性能与体积

5. 技术生态与兼容性

6. 学习成本与文档

7. 适用场景

8. 总结对比

选择建议

实践

组件库的选用

由于TAURI2.0使用的vue前端框架，组件库配置和TypeScript配置相同

二、TDesign安装

1. TDesign官网

2. 安装TDesign

3. 配置按需引入

三、Prettier安装和配置

1. 安装Prettier

2. 配置Prettier

四、相对路径配置

相关阅读

目录[+]