Lyt.js + Vite 快速开发指南

idcu2026-05-23 9:56

Lyt.js + Vite 快速开发指南

使用 Vite 和 Lyt.js v6.6.0 搭建现代化前端开发环境。

环境要求

  • Node.js >= 18.0.0
  • npm / pnpm / yarn

方式一：使用 CLI（推荐）

bash 复制代码 
# 创建新项目
npm create lyt@latest my-app

# 进入目录
cd my-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

CLI 会自动配置好一切，包括 Vite、TypeScript 和 Lyt.js 插件。

方式二：手动创建

1. 初始化项目
bash 复制代码 
mkdir my-app && cd my-app
npm init -y
2. 安装依赖
bash 复制代码 
# 核心依赖
npm install @lytjs/core @lytjs/router @lytjs/store

# 开发依赖
npm install -D vite @lytjs/plugin-vite typescript
3. 创建文件
html 复制代码 
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>
typescript 复制代码 
// src/main.ts
import { createApp } from '@lytjs/core'
import App from './App.lyt'

createApp(App).mount('#app')
typescript 复制代码 
// src/App.lyt
<script setup>
import { ref } from '@lytjs/core'

const message = ref('Hello Lyt.js!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>
4. 配置 Vite
typescript 复制代码 
// vite.config.ts
import { defineConfig } from 'vite'
import lyt from '@lytjs/plugin-vite'

export default defineConfig({
  plugins: [lyt()],
})
json 复制代码 
// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "type": "module"
}
5. 启动
bash 复制代码 
npm run dev

Vite 配置详解

基本配置
typescript 复制代码 
// vite.config.ts
import { defineConfig } from 'vite'
import lyt from '@lytjs/plugin-vite'
import { resolve } from 'path'

export default defineConfig({
  plugins: [lyt()],
  
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  
  server: {
    port: 3000,
    open: true,
  },
})
Lyt.js 插件配置
typescript 复制代码 
// vite.config.ts
import { defineConfig } from 'vite'
import lyt from '@lytjs/plugin-vite'

export default defineConfig({
  plugins: [
    lyt({
      // 文件扩展名
      extensions: ['.lyt', '.vue'],
      
      // 是否启用 SSR
      ssr: false,
      
      // 编译器选项
      compilerOptions: {
        // 是否提取 CSS
        css: true,
        // 是否生成 source map
        sourceMap: true,
      },
      
      // HMR 选项
      hmr: {
        // 组件热更新
        component: true,
        // 样式热更新
        style: true,
      },
    }),
  ],
})

开发服务器

bash 复制代码 
# 启动开发服务器
npm run dev

# 指定端口
npm run dev -- --port 8080

# 开启 HTTPS
npm run dev -- --https

# 打开浏览器
npm run dev -- --open

构建生产版本

bash 复制代码 
# 构建
npm run build

# 预览构建结果
npm run preview

# 分析包体积
npm run build -- --analyze

TypeScript 配置

json 复制代码 
// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.lyt"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
json 复制代码 
// tsconfig.node.json
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

项目结构推荐

csharp 复制代码 
my-app/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── src/
│   ├── main.ts              # 入口文件
│   ├── App.lyt              # 根组件
│   ├── assets/              # 静态资源
│   │   └── styles/
│   │       └── main.css
│   ├── components/          # 公共组件
│   │   ├── Header.lyt
│   │   ├── Footer.lyt
│   │   └── Button.lyt
│   ├── views/               # 页面组件
│   │   ├── Home.lyt
│   │   ├── About.lyt
│   │   └── NotFound.lyt
│   ├── router/              # 路由
│   │   └── index.ts
│   ├── stores/              # 状态管理
│   │   └── user.ts
│   ├── composables/         # 组合式函数
│   │   └── useCount.ts
│   ├── utils/               # 工具函数
│   │   └── format.ts
│   └── types/               # 类型定义
│       └── index.ts
└── public/                 # 静态文件（不经过构建）
    └── favicon.ico

常用命令

命令 说明
npm run dev 启动开发服务器
npm run build 构建生产版本
npm run preview 预览生产版本
npm run type-check TypeScript 类型检查
npm run lint 代码检查

热模块替换（HMR）

Lyt.js 插件支持完整的 HMR：

  • 组件更新：修改组件代码，页面无刷新更新
  • 样式更新：修改 CSS，实时生效
  • 状态保留：更新组件时保持当前状态

集成其他包

路由
typescript 复制代码 
// src/router/index.ts
import { createRouter, createWebHistory } from '@lytjs/router'
import Home from '../views/Home.lyt'
import About from '../views/About.lyt'

export const router = createRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
})
typescript 复制代码 
// src/main.ts
import { createApp } from '@lytjs/core'
import App from './App.lyt'
import { router } from './router'

createApp(App).use(router).mount('#app')
html 复制代码 
<!-- src/App.lyt -->
<script setup>
import { RouterView } from '@lytjs/router'
</script>

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <RouterView />
</template>
状态管理
typescript 复制代码 
// src/stores/counter.ts
import { createStore } from '@lytjs/store'

export const counterStore = createStore({
  name: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment(state) {
      state.count++
    },
  },
})
html 复制代码 
<!-- 使用 Store -->
<script setup>
import { counterStore } from '../stores/counter'

counterStore.actions.increment()
</script>

<template>
  <p>Count: {{ counterStore.state.count }}</p>
</template>
UI 组件库
bash 复制代码 
npm install @lytjs/ui
typescript 复制代码 
// src/main.ts
import { createApp } from '@lytjs/core'
import LytUI from '@lytjs/ui'
import App from './App.lyt'

createApp(App).use(LytUI).mount('#app')

常见问题

Q: .lyt 文件无法识别？

确保 vite.config.ts 中配置了 Lyt.js 插件：

typescript 复制代码 
import lyt from '@lytjs/plugin-vite'

export default {
  plugins: [lyt()],
}
Q: TypeScript 报错找不到模块？

确保 tsconfig.json 配置了正确的路径解析：

json 复制代码 
{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}
Q: 样式不生效？

检查 CSS 是否正确导入：

typescript 复制代码 
// 确保导入 CSS
import './assets/styles/main.css'

下一步

相关推荐
暗不需求4 小时前
玩转 React Hooks：从基础到实战，逐行解析带你彻底掌握
前端·react.js·面试
一颗小青松4 小时前
css 文字区域根据图片形状显示，根据文字设置背景图
前端·css
阿黎梨梨4 小时前
跟 Git 打交道的正确姿势
前端
idcu4 小时前
深入 Lyt.js 路由系统：L6 生态系统层的核心
前端·typescript
idcu4 小时前
用 Lyt.js 构建 Todo 应用：完整教程
前端·typescript
七夜zippoe4 小时前
DolphinDB时间序列引擎：实时聚合计算
服务器·前端·时间序列·dolphindb·实时聚合
佳木逢钺4 小时前
pnpm 命令功能清单
前端
m0_738120724 小时前
渗透测试基础知识——从零认识JWT（JSON Web Token）身份令牌
服务器·前端·安全·web安全·网络安全·json
放下华子我只抽RuiKe54 小时前
React 从入门到生产（六）：路由与导航
前端·人工智能·深度学习·react.js·前端框架·html·claude code
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法04装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？05裂开！ChatGPT 居然开始要手机号验证，附详细解决方法06CC-Switch & Claude 基于 Linux 服务器安装使用指南07【AI】2026 年具身智能模型和世界模型总结08几个好用的ip纯净度检测网站09用了半年 OpenRouter，我换到了 Ofox.ai — 两个 AI API 聚合平台的真实对比10codex app每次打开重连5次Reconnecting问题解决