快速入门
LGOS Studio 快速入门指南
了解如何在几分钟内启动并运行您的第一个 LGOS Studio 应用程序
概述
欢迎使用 LGOS Studio 框架！本指南将帮助您快速开始使用 LGOS Studio 构建现代化、高性能的应用程序。LGOS Studio 是一个轻量级、模块化的前端框架，专注于提供无边界的设计体验和卓越的性能。
系统要求
在开始之前，请确保您的开发环境满足以下要求：
- Node.js v16.0 或更高版本
- npm v8.0 或更高版本
- 现代浏览器（Chrome 88+, Firefox 85+, Safari 14+）
安装 LGOS Studio
使用 CLI 创建新项目
最简单的方式是使用 LGOS Studio CLI 创建新项目：
bash
npx create-LGOS Studio-app my-app
cd my-app
npm install
npm run dev
手动安装
如果您希望手动集成 LGOS Studio 到现有项目中：
bash
npm install @LGOS Studio/core @LGOS Studio/react
创建您的第一个组件
函数式组件
javascript
// src/components/Welcome.jsx
import { useState } from '@LGOS Studio/react';
export default function Welcome() {
const [count, setCount] = useState(0);
return (
<div className="welcome-container">
<h1>欢迎使用 LGOS Studio!</h1>
<p>您已点击按钮 {count} 次</p>
<button
className="primary-btn"
onClick={() => setCount(count + 1)}
>
点击我
</button>
</div>
);
}
样式模块
css
/* src/components/Welcome.module.css */
.welcome-container {
max-width: 600px;
margin: 2rem auto;
padding: 2rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.primary-btn {
background: linear-gradient(45deg, #4361ee, #38b6ff);
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.primary-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
}
路由配置
LGOS Studio 提供了简单的路由解决方案：
javascript
// src/App.jsx
import { Router, Route } from '@LGOS Studio/react-router';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
export default function App() {
return (
<Router>
<Route path="/" component={Home} exact />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
);
}
状态管理
LGOS Studio 提供了轻量级的状态管理解决方案：
javascript
// src/store/userStore.js
import { createStore } from '@LGOS Studio/core';
const userStore = createStore({
state: {
name: '访客',
isLoggedIn: false
},
actions: {
login(state, name) {
state.name = name;
state.isLoggedIn = true;
},
logout(state) {
state.name = '访客';
state.isLoggedIn = false;
}
}
});
export default userStore;
在组件中使用：
javascript
import { useStore } from '@LGOS Studio/react';
import userStore from './store/userStore';
function UserProfile() {
const [user, actions] = useStore(userStore);
return (
<div>
{user.isLoggedIn ? (
<div>
<p>欢迎, {user.name}!</p>
<button onClick={actions.logout}>登出</button>
</div>
) : (
<button onClick={() => actions.login('新用户')}>登录</button>
)}
</div>
);
}
API 请求
使用 LGOS Studio 的 HTTP 模块进行 API 调用：
javascript
import { useEffect, useState } from '@LGOS Studio/react';
import { http } from '@LGOS Studio/core';
function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
const response = await http.get('/api/data');
setData(response.data);
} catch (error) {
console.error('获取数据失败:', error);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
if (loading) return <p>加载中...</p>;
return (
<div>
<h2>获取的数据</h2>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
性能优化技巧
组件懒加载
javascript
import { lazy, Suspense } from '@LGOS Studio/react';
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<div>加载中...</div>}>
<HeavyComponent />
</Suspense>
);
}
记忆化计算
javascript
import { useMemo } from '@LGOS Studio/react';
function ExpensiveComponent({ items }) {
const sortedItems = useMemo(() => {
return items.sort((a, b) => a.value - b.value);
}, [items]);
return (
<ul>
{sortedItems.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
最佳实践
组件设计
- 保持组件小而专注
- 使用组合而非继承
- 遵循单一职责原则
状态管理
- 仅在必要时使用全局状态
- 优先使用本地组件状态
- 使用选择器优化状态访问
性能优化
- 使用
useMemo和useCallback避免不必要的重新计算 - 使用虚拟列表处理大型数据集
- 使用代码分割减少初始加载时间
样式管理
- 使用 CSS 模块避免样式冲突
- 采用设计系统保持一致性
- 使用 CSS 变量实现主题切换
下一步
现在您已经掌握了 LGOS Studio 的基础知识，接下来可以：