OpenDesign Token与Vue/React集成教程：现代前端框架的完美搭配

OpenDesign Token与Vue/React集成教程现代前端框架的完美搭配【免费下载链接】opendesign-tokenThe repository of OpenDesign token项目地址: https://gitcode.com/openeuler/opendesign-token前往项目官网免费下载https://ar.openeuler.org/ar/OpenDesign Token是openEuler开源社区的设计系统变量库为现代前端开发提供了一套完整的设计语言解决方案。这个强大的设计系统包含了颜色、字体、间距、响应式变量等核心设计元素能够帮助开发者快速构建一致、美观且响应式的用户界面。本文将为您详细介绍如何在Vue和React项目中集成OpenDesign Token实现高效的前端开发工作流。 为什么选择OpenDesign TokenOpenDesign Token提供了多套开源社区的设计皮肤包括openEuler、Ascend、Kunpeng、Mindspore等主流开源项目的设计规范。通过使用这些设计变量您可以保持设计一致性确保整个应用的设计语言统一提高开发效率通过CSS变量快速应用设计规范支持主题切换轻松实现浅色/深色主题模式响应式设计内置的响应式变量自动适配不同屏幕尺寸鸿蒙字体支持集成华为鸿蒙字体提供优秀的视觉体验 安装OpenDesign Token在开始集成之前您需要先安装OpenDesign Token包。根据您使用的包管理器选择相应的命令# 使用npm安装 npm install opensig/opendesign-token # 使用pnpm安装推荐 pnpm add opensig/opendesign-token # 使用yarn安装 yarn add opensig/opendesign-token Vue 3项目集成指南1. 基础集成配置在Vue 3项目中首先在入口文件通常是main.ts或main.js中引入OpenDesign Token// src/main.ts import { createApp } from vue import App from ./App.vue import opensig/opendesign-token/fonts/css // 引入鸿蒙字体 import opensig/opendesign-token/themes/e.token.css // 引入openEuler主题 createApp(App).mount(#app)2. 主题切换功能实现OpenDesign Token支持浅色和深色主题切换。您可以在Vue组件中轻松实现主题切换功能!-- src/components/ThemeToggle.vue -- template button clicktoggleTheme classtheme-toggle {{ isDarkMode ? 切换到浅色主题 : 切换到深色主题 }} /button /template script setup langts import { ref, onMounted } from vue const isDarkMode ref(false) const toggleTheme () { isDarkMode.value !isDarkMode.value const theme isDarkMode.value ? e-dark : e-light document.documentElement.setAttribute(data-o-theme, theme) } onMounted(() { // 检测系统主题偏好 const prefersDark window.matchMedia((prefers-color-scheme: dark)) if (prefersDark.matches) { isDarkMode.value true document.documentElement.setAttribute(data-o-theme, e-dark) } }) /script style scoped .theme-toggle { padding: var(--o-r-gap-2) var(--o-r-gap-4); background-color: var(--o-color-brand-6); color: var(--o-color-white); border: none; border-radius: var(--o-r-border_radius-2); cursor: pointer; font-family: var(--o-font_family); font-weight: var(--o-font_weight-medium); } /style3. 使用设计变量在Vue组件中您可以直接使用OpenDesign Token提供的CSS变量!-- src/components/Button.vue -- template button :class[custom-button, variant] slot/slot /button /template script setup langts defineProps{ variant?: primary | secondary | outline }() /script style scoped .custom-button { padding: var(--o-r-gap-3) var(--o-r-gap-6); border-radius: var(--o-r-border_radius-2); font-family: var(--o-font_family); font-weight: var(--o-font_weight-semibold); font-size: var(--o-r-font_size-body); line-height: var(--o-r-line_height-body); cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .primary { background-color: var(--o-color-brand-6); color: var(--o-color-white); } .primary:hover { background-color: var(--o-color-brand-7); } .secondary { background-color: var(--o-color-neutral-2); color: var(--o-color-text-primary); } .secondary:hover { background-color: var(--o-color-neutral-3); } .outline { background-color: transparent; color: var(--o-color-brand-6); border-color: var(--o-color-brand-6); } .outline:hover { background-color: var(--o-color-brand-1); } /style⚛️ React项目集成指南1. 基础配置在React项目中您可以在入口文件如index.js或index.tsx中引入OpenDesign Token// src/index.jsx import React from react import ReactDOM from react-dom/client import App from ./App import opensig/opendesign-token/fonts/css import opensig/opendesign-token/themes/e.token.css import ./index.css const root ReactDOM.createRoot(document.getElementById(root)) root.render( React.StrictMode App / /React.StrictMode )2. 创建主题上下文为了更好地管理主题状态您可以创建一个React Context// src/contexts/ThemeContext.jsx import React, { createContext, useContext, useState, useEffect } from react const ThemeContext createContext() export const ThemeProvider ({ children }) { const [theme, setTheme] useState(e-light) useEffect(() { // 应用主题到根元素 document.documentElement.setAttribute(data-o-theme, theme) // 保存到localStorage localStorage.setItem(theme, theme) }, [theme]) useEffect(() { // 初始化时检查保存的主题或系统偏好 const savedTheme localStorage.getItem(theme) const prefersDark window.matchMedia((prefers-color-scheme: dark)) if (savedTheme) { setTheme(savedTheme) } else if (prefersDark.matches) { setTheme(e-dark) } }, []) const toggleTheme () { setTheme(prev prev e-light ? e-dark : e-light) } return ( ThemeContext.Provider value{{ theme, toggleTheme }} {children} /ThemeContext.Provider ) } export const useTheme () useContext(ThemeContext)3. 响应式布局组件利用OpenDesign Token的响应式变量创建自适应的布局组件// src/components/ResponsiveContainer.jsx import React from react import ./ResponsiveContainer.css const ResponsiveContainer ({ children, className }) { return ( div className{responsive-container ${className}} {children} /div ) } export default ResponsiveContainer/* src/components/ResponsiveContainer.css */ .responsive-container { max-width: var(--o-r-max_width-screen_xl); margin: 0 auto; padding: 0 var(--o-r-gap-4); } media (min-width: var(--o-r-breakpoint-sm)) { .responsive-container { padding: 0 var(--o-r-gap-6); } } media (min-width: var(--o-r-breakpoint-md)) { .responsive-container { padding: 0 var(--o-r-gap-8); } }4. 使用styled-components集成如果您使用styled-components可以这样集成OpenDesign Token// src/components/StyledCard.jsx import styled from styled-components const StyledCard styled.div background-color: var(--o-color-white); border-radius: var(--o-r-border_radius-3); padding: var(--o-r-gap-6); box-shadow: var(--o-shadow-2); border: 1px solid var(--o-color-neutral-3); transition: box-shadow 0.3s ease; font-family: var(--o-font_family); :hover { box-shadow: var(--o-shadow-4); } .card-title { font-size: var(--o-r-font_size-h3); font-weight: var(--o-font_weight-semibold); color: var(--o-color-text-primary); margin-bottom: var(--o-r-gap-4); } .card-content { font-size: var(--o-r-font_size-body); line-height: var(--o-r-line_height-body); color: var(--o-color-text-secondary); } const Card ({ title, children }) { return ( StyledCard {title div classNamecard-title{title}/div} div classNamecard-content{children}/div /StyledCard ) } export default Card 多主题支持OpenDesign Token支持多套社区主题您可以根据项目需求选择合适的主题// src/utils/themeLoader.js export const loadTheme (themeName) { // 移除当前主题 const currentTheme document.documentElement.getAttribute(data-o-theme) if (currentTheme) { const currentThemeClass currentTheme.split(-)[0] document.documentElement.classList.remove(${currentThemeClass}-theme) } // 加载新主题 import(opensig/opendesign-token/themes/${themeName}.token.css) .then(() { document.documentElement.setAttribute(data-o-theme, themeName) const themeClass themeName.split(-)[0] document.documentElement.classList.add(${themeClass}-theme) }) .catch(error { console.error(Failed to load theme ${themeName}:, error) }) } // 可用主题列表 export const availableThemes [ { value: e-light, label: openEuler 浅色 }, { value: e-dark, label: openEuler 深色 }, { value: a-light, label: Ascend 浅色 }, { value: a-dark, label: Ascend 深色 }, { value: k-light, label: Kunpeng 浅色 }, { value: k-dark, label: Kunpeng 深色 }, { value: m-light, label: Mindspore 浅色 }, { value: m-dark, label: Mindspore 深色 } ] 响应式设计实践OpenDesign Token内置了完整的响应式变量系统让您的应用在不同设备上都能完美呈现/* 响应式字体大小 */ .responsive-heading { font-size: var(--o-r-font_size-h1); line-height: var(--o-r-line_height-h1); } /* 响应式间距 */ .responsive-spacing { padding: var(--o-r-gap-4); margin-bottom: var(--o-r-gap-6); } media (min-width: var(--o-r-breakpoint-md)) { .responsive-spacing { padding: var(--o-r-gap-6); margin-bottom: var(--o-r-gap-8); } } /* 栅格系统 */ .grid-container { display: grid; grid-template-columns: repeat(var(--o-r-grid-columns), 1fr); gap: var(--o-r-gap-4); } .grid-item-3 { grid-column: span 3; } .grid-item-6 { grid-column: span 6; } .grid-item-9 { grid-column: span 9; } 自定义主题配置如果您需要自定义主题可以参考OpenDesign Token的配置文件结构// 参考配置文件结构 // packages/opendesign-token/configs/openEuler.token.config.ts您可以在项目中创建自定义的token配置文件然后使用相同的变量命名约定来扩展或覆盖默认主题。 性能优化建议按需加载字体如果只需要特定字重可以按需引入字体文件主题懒加载只在需要时加载主题CSS文件CSS变量缓存浏览器会自动缓存CSS变量确保性能Tree Shaking构建工具会自动移除未使用的CSS变量 最佳实践总结统一变量使用始终使用OpenDesign Token提供的CSS变量而不是硬编码值主题一致性在整个项目中保持主题切换的一致性响应式优先从移动端开始设计利用响应式变量适配不同屏幕字体优化合理使用鸿蒙字体的不同字重提升阅读体验类型安全在TypeScript项目中为CSS变量创建类型定义 结语OpenDesign Token为Vue和React项目提供了一套完整、一致且易于使用的设计系统解决方案。通过集成这个强大的工具您可以显著提高开发效率确保设计一致性并轻松实现主题切换和响应式设计。无论是构建企业级应用还是开源项目OpenDesign Token都能为您的前端开发工作流带来巨大的价值。开始使用OpenDesign Token让您的Vue和React项目拥有专业级的设计系统支持【免费下载链接】opendesign-tokenThe repository of OpenDesign token项目地址: https://gitcode.com/openeuler/opendesign-token创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考