Devye's Blog
Search K

Appearance

【详细教程】使用 Mithril.js + TSX + Vite + Tailwind CSS + daisyUI 搭建前端项目 ​

Mithril.js 介绍 ​

Mithril.js 官网: https://mithril.js.org/

Mithril.js 是一个现代化的 JavaScript 前端框架，特点是轻量（压缩后约 10KB）、快速、易于学习。它适合构建结构清晰、逻辑紧凑的 SPA 应用，支持虚拟 DOM、组件化开发和内置路由与请求模块。

商业案例: Vimeo, Nike, Lichess

性能数据对比 ​

框架组合下载体积性能（渲染时间）
Mithril.js8.7 KiB6.4 ms
Vue + Vue-Router + Vuex + fetch40 KiB9.8 ms
React + React-Router + Redux + fetch64 KiB12.1 ms
Angular135 KiB11.5 ms

daisyUI 介绍 ​

daisyUI 官网: https://daisyui.com/

daisyUI 是基于 Tailwind CSS 的 UI 组件库，它在 Tailwind 的原子类基础上，提供了易用的、语义化的组件类名，如 btn, card, alert 等，让开发者可以用更少的代码实现漂亮的 UI。

搭建步骤 ​

初始化 Vite 项目 ​

shell
npm create vite@latest mithril-tsx-app -- --template vanilla-ts
cd mithril-tsx-app

⚠️ Vite 没有 Mithril 的官方模板，但我们可以用 vanilla-ts 自行配置。

安装依赖 ​

shell
pnpm install mithril
pnpm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
pnpm install -D @types/mithril @types/node

配置 tsconfig.json 支持 TSX ​

  • tsconfig.json
    json
    {
"compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "types": ["vite/client"]
},
"include": ["src"]
}

配置 Vite ​

  • vite.config.ts
    ts
    import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite';
import path from 'path'

export default defineConfig({
plugins: [
    tailwindcss()
],
resolve: {
    alias: {
    '@': path.resolve(__dirname, './src'),
    },
},
esbuild: {
    jsx: "transform",
    jsxFactory: "m",
    jsxFragment: "'['",
},
})

配置 Tailwind 和 daisyUI ​

  • tailwind.config.js
    js
    module.exports = {
content: [
    './index.html',
    './src/**/*.{ts,tsx}',
],
theme: {
    extend: {},
},
plugins: [
    require('daisyui')],
}

更新 index.html ​

  • index.html
    html
    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.tsx"></script>
</body>
</html>

配置 CSS 引入 ​

  • src/style.css 添加如下内容

    css
    @import "tailwindcss";
@plugin "daisyui";

  • 加上如下样式效果更好

    css
    :root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}

#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

编写 TSX 页面 ​

  • src/main.tsx

    tsx
    import m from 'mithril'
import App from './App'
import './style.css'

m.mount(document.getElementById('app') as HTMLElement, App)

  • src/App.tsx

    tsx
    import m from 'mithril'

const App = {
view: () => (
    <div class="p-4">
    <h1 class="text-2xl font-bold">Hello, Mithril.js with TSX, Vite and DaisyUI!</h1>
    <button class="btn btn-primary mt-4">Click Me</button>
    <div class="card w-80 bg-base-200">
        <div class="card-body gap-3">
        <input placeholder="Email" class="input" />
        <label class="label">
            <input type="checkbox" class="toggle toggle-sm" />
            Submit to newsletter
        </label>
        <label class="label">
            <input type="checkbox" class="toggle toggle-sm" />
            Accept terms of use
        </label>
        <button class="btn btn-neutral">Save</button>
        </div>
    </div>
    </div>
)
}

export default App

启动开发服务器 ​

shell
pnpm run dev

Dev

上次更新于: