Solid安装 #

一、环境准备 #

1.1 系统要求 #

text 
Node.js >= 16.0.0
npm >= 7.0.0 或 pnpm >= 7.0.0 或 yarn >= 1.22

1.2 检查环境 #

bash 
# 检查 Node.js 版本
node -v

# 检查 npm 版本
npm -v

# 检查 pnpm 版本（如果使用）
pnpm -v

二、创建新项目 #

2.1 使用 Vite（推荐） #

Vite 是 Solid 官方推荐的构建工具，提供快速的开发体验。

bash 
# 使用 npm
npm create vite@latest my-solid-app -- --template solid

# 使用 TypeScript 模板（推荐）
npm create vite@latest my-solid-app -- --template solid-ts

# 使用 pnpm
pnpm create vite my-solid-app --template solid-ts

# 使用 yarn
yarn create vite my-solid-app --template solid-ts

2.2 项目结构 #

text 
my-solid-app/
├── public/
│   └── vite.svg
├── src/
│   ├── App.jsx          # 根组件
│   ├── App.css          # 样式文件
│   ├── index.jsx        # 入口文件
│   └── index.css        # 全局样式
├── index.html           # HTML 模板
├── package.json         # 项目配置
├── vite.config.js       # Vite 配置
└── tsconfig.json        # TypeScript 配置（TS项目）

2.3 启动项目 #

bash 
# 进入项目目录
cd my-solid-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:5173 查看应用。

三、手动配置项目 #

3.1 创建项目目录 #

bash 
mkdir my-solid-app
cd my-solid-app
npm init -y

3.2 安装依赖 #

bash 
# 安装 Solid 核心
npm install solid-js

# 安装 Vite 和插件
npm install -D vite @vitejs/plugin-solid

# 安装 TypeScript（可选）
npm install -D typescript @types/node

3.3 配置 Vite #

创建 vite.config.js：

javascript 
import { defineConfig } from 'vite';
import solid from '@vitejs/plugin-solid';

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

3.4 创建入口文件 #

创建 index.html：

html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Solid App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/index.jsx"></script>
</body>
</html>

创建 src/index.jsx：

jsx 
import { render } from 'solid-js/web';
import App from './App';

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

创建 src/App.jsx：

jsx 
import { createSignal } from 'solid-js';

function App() {
  const [count, setCount] = createSignal(0);

  return (
    <div>
      <h1>Hello Solid!</h1>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;

3.5 配置 package.json #

json 
{
  "name": "my-solid-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "solid-js": "^1.8.0"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "@vitejs/plugin-solid": "^2.8.0"
  }
}

四、TypeScript 配置 #

4.1 tsconfig.json #

json 
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

4.2 TypeScript 组件示例 #

src/App.tsx：

tsx 
import { createSignal, JSX } from 'solid-js';

interface AppProps {
  name?: string;
}

function App(props: AppProps): JSX.Element {
  const [count, setCount] = createSignal<number>(0);

  return (
    <div>
      <h1>Hello {props.name || 'Solid'}!</h1>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;

五、开发工具 #

5.1 VS Code 插件 #

推荐安装以下 VS Code 插件：

text 
必装插件
├── Solid (vscode-solid) - Solid 语法高亮
├── TypeScript Vue Plugin (Volar) - TS 支持
└── ESLint - 代码检查

推荐插件
├── Prettier - 代码格式化
├── Tailwind CSS IntelliSense - Tailwind 支持
└── Auto Rename Tag - 标签自动重命名

5.2 浏览器扩展 #

安装 Solid DevTools：

5.3 ESLint 配置 #

bash 
npm install -D eslint @typescript-eslint/parser eslint-plugin-solid

创建 .eslintrc.cjs：

javascript 
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'solid'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:solid/recommended'
  ],
  rules: {
    'solid/reactivity': 'error',
    'solid/no-destructure': 'error'
  }
};

六、项目脚本 #

6.1 常用命令 #

json 
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext .ts,.tsx",
    "type-check": "tsc --noEmit"
  }
}

6.2 命令说明 #

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

七、常见问题 #

7.1 JSX 配置问题 #

如果遇到 JSX 解析错误，确保：

  1. vite.config.js 中配置了 @vitejs/plugin-solid
  2. tsconfig.json 中设置了 "jsxImportSource": "solid-js"

7.2 热更新问题 #

Solid 支持热模块替换（HMR），如果热更新不工作：

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

export default defineConfig({
  plugins: [solid({ hot: true })]
});

7.3 路径别名 #

配置路径别名：

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

export default defineConfig({
  plugins: [solid()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

八、总结 #

安装 Solid 的关键步骤：

  1. 使用 Vite 模板：快速创建项目
  2. 配置 TypeScript：获得更好的开发体验
  3. 安装开发工具：VS Code 插件和浏览器扩展
  4. 配置 ESLint：保证代码质量

推荐的开发环境：

  • Node.js >= 18
  • Vite 作为构建工具
  • TypeScript 进行类型检查
  • VS Code + Solid 插件
最后更新：2026-03-28