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'

下一步

相关推荐
meilindehuzi_a10 小时前
Vue3进阶基础：指令修饰符、v-model表单绑定、动态样式、计算属性与侦听器实战
前端·javascript·vue.js
csdn2015_10 小时前
vue 前端运行命令
前端·javascript·vue.js
swipe10 小时前
02｜从 `pnpm dev` 到 Spring Boot 启动：后端服务到底怎么跑起来？
前端·后端·全栈
阿懂在掘金11 小时前
做命令式弹窗工具应该考虑什么——我为什么把 vue-layerx 设计成这样
前端·前端框架·函数式编程
太平洋月光11 小时前
AI 快捷指令：Cursor Rules · Commands · Skills
前端·ai编程
默_笙11 小时前
😁 LLM 不知道的事它不会说"不知道"，而是会"编"——RAG 就是让它闭嘴先查资料
前端·javascript
stringwu11 小时前
用 LangGraph 落地飞书 Bug 自动修复 Agent 实践
前端
Revolution6111 小时前
变量提升到底提升了什么：为什么 var 是 undefined，let 却直接报错
前端·javascript
Revolution6111 小时前
本地明明正常，为什么 CI 又挂了：一次前端构建失败的排查过程
前端·前端工程化
如此风景11 小时前
TS装饰器详解
typescript
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03如何新建文件夹？ 电脑新建文件夹的4种方法04国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）05AI科技热点日报 | 2026年07月01日06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南08微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新09【解构】DeepSeek V4 发布：技术报告深度解读 + 横向对比六大开源模型，我们的判断是……102026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？