📦 创建项目

使用 Vite 模板（推荐）

bash
# 创建新项目
npx degit solidjs/templates/js my-app
cd my-app
npm install
npm run dev

# TypeScript 版本
npx degit solidjs/templates/ts my-app

手动安装

bash
npm install solid-js
npm install -D vite-plugin-solid vite

⚙️ Vite 配置

javascript
// vite.config.js
import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solid()],
  server: {
    port: 3000
  },
  build: {
    target: 'esnext'
  }
});

🚀 第一个应用

jsx
// src/index.jsx
import { render } from 'solid-js/web';
import { createSignal } from 'solid-js';

function App() {
  const [count, setCount] = createSignal(0);
  
  return (
    <div>
      <h1>Hello SolidJS!</h1>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}

render(() => <App />, document.getElementById('app'));

📁 项目结构

text
my-app/
├── src/
│   ├── index.jsx        # 入口文件
│   ├── App.jsx          # 根组件
│   ├── index.css        # 全局样式
│   └── components/      # 组件目录
│       └── Counter.jsx
├── index.html           # HTML 模板
├── vite.config.js       # Vite 配置
└── package.json

🔗 CDN 使用

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SolidJS App</title>
</head>
<body>
  <div id="app"></div>
  
  <script type="module">
    import {
      createSignal,
      render
    } from 'https://cdn.jsdelivr.net/npm/solid-js@1.8/dist/solid.js';
    
    const [count, setCount] = createSignal(0);
    
    render(() => `
      <div>
        <p>Count: ${count()}</p>
        <button>+1</button>
      </div>
    `, document.getElementById('app'));
  </script>
</body>
</html>

🛠️ 开发工具

VS Code 插件

  • Solid - 语法高亮和智能提示
  • esbuild - 更快的构建速度

浏览器扩展

Solid DevTools - 查看组件树和状态

调试技巧

javascript
// 使用 createEffect 调试
createEffect(() => {
  console.log('count changed:', count());
});

// 使用 devtools
import { enableSourcemap } from 'solid-js/dev';
enableSourcemap();