Lyt.js + Vite 快速开发指南

idcu
1 阅读3分钟

Lyt.js + Vite 快速开发指南

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

环境要求

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

方式一：使用 CLI（推荐）

# 创建新项目
npm create lyt@latest my-app

# 进入目录
cd my-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

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

方式二：手动创建

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

# 开发依赖
npm install -D vite @lytjs/plugin-vite typescript
3. 创建文件
<!-- 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>

// src/main.ts
import { createApp } from '@lytjs/core'
import App from './App.lyt'

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

// src/App.lyt
<script setup>
import { ref } from '@lytjs/core'

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

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

export default defineConfig({
  plugins: [lyt()],
})

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "type": "module"
}
5. 启动
npm run dev

Vite 配置详解

基本配置
// 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 插件配置
// 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,
      },
    }),
  ],
})

开发服务器

# 启动开发服务器
npm run dev

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

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

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

构建生产版本

# 构建
npm run build

# 预览构建结果
npm run preview

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

TypeScript 配置

// 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" }]
}

// tsconfig.node.json
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

项目结构推荐

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-checkTypeScript 类型检查
npm run lint代码检查

热模块替换（HMR）

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

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

集成其他包

路由
// 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 },
  ],
})

// src/main.ts
import { createApp } from '@lytjs/core'
import App from './App.lyt'
import { router } from './router'

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

<!-- 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>
状态管理
// src/stores/counter.ts
import { createStore } from '@lytjs/store'

export const counterStore = createStore({
  name: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment(state) {
      state.count++
    },
  },
})

<!-- 使用 Store -->
<script setup>
import { counterStore } from '../stores/counter'

counterStore.actions.increment()
</script>

<template>
  <p>Count: {{ counterStore.state.count }}</p>
</template>
UI 组件库
npm install @lytjs/ui

// 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 插件：

import lyt from '@lytjs/plugin-vite'

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

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

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}
Q: 样式不生效？

检查 CSS 是否正确导入：

// 确保导入 CSS
import './assets/styles/main.css'

下一步

avatar
文章
阅读
粉丝