### Install Specific NodeJS Version

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Installs a particular version of Node.js, for example, 18.20.5. This command downloads and sets up the specified Node.js runtime.

```bash
nvm install 18.20.5
```

--------------------------------

### Verify nvm Installation

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Checks if the nvm command is recognized after installation by displaying its version. This confirms successful setup.

```bash
nvm --version
```

--------------------------------

### List Installed NodeJS Versions

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Shows all Node.js versions that have been installed locally via nvm.

```bash
nvm ls
```

--------------------------------

### Install FNM on macOS

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Installs FNM using a curl command, downloading and executing the installation script from the official FNM repository.

```bash
curl -fsSL https://fnm.vercel.app/install | bash
```

--------------------------------

### List Available NodeJS Versions

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Fetches and displays a list of all remotely available Node.js versions that can be installed using nvm.

```bash
nvm ls-remote
```

--------------------------------

### Install nvm on Windows

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Provides the download link for the nvm-windows installer. This tool is used to manage Node.js versions on Windows systems.

```bash
https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.exe
```

--------------------------------

### Switch NodeJS Version

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Sets the active Node.js version to a previously installed one, for example, 18.20.5. Subsequent commands will use this version.

```bash
nvm use 18.20.5
```

--------------------------------

### Install klona

Source: https://docs.soybeanjs.cn/zh/recommend/klona

Install the klona library using npm for your project.

```bash
npm install --save klona
```

--------------------------------

### Install klona

Source: https://docs.soybeanjs.cn/recommend/klona

Install the klona package using npm for use in your project.

```bash
npm install --save klona
```

--------------------------------

### Install Node.js Versions with FNM

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Installs specific Node.js versions (16, 14, 12) using the fnm install command.

```other
fnm install 16
fnm install 14
fnm install 12
```

--------------------------------

### JavaScript Route Configuration Example

Source: https://docs.soybeanjs.cn/guide/router/intro

An example of a route configuration object, demonstrating how to use the meta property with title, i18nKey, and hideInMenu from the RouteMeta interface.

```javascript
{
    name: '403',
    path: '/403',
    component: 'layout.blank$view.403',
    meta: {
      title: '403',
      i18nKey: 'route.403',
      hideInMenu: true
    }
}
```

--------------------------------

### Display FNM Help Information

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Displays comprehensive help information for FNM, including all available commands and options.

```other
fnm -h
```

--------------------------------

### Test Node.js Command

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Verifies the installed Node.js version by running the 'node -v' command.

```other
node -v
```

--------------------------------

### Install Chocolatey Package Manager

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Installs Chocolatey, a package manager for Windows, using PowerShell. This is a prerequisite for installing fnm via Chocolatey.

```powershell
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
```

--------------------------------

### Route Configuration Example

Source: https://docs.soybeanjs.cn/guide/router/push

An example of how a route might be configured with a 'name' property, which is used as a key for the routerPushByKey method.

```json
{
  "name": "soybean",
  "path": "/soybean-page",
  "component": "layout.base$view.soybean-page"
}
```

--------------------------------

### Install nvm on macOS

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Installs the Node Version Manager (nvm) on macOS using a curl script. This tool helps manage multiple Node.js versions.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
```

--------------------------------

### Install fnm using Chocolatey

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Installs the Fast Node Manager (fnm) using the Chocolatey package manager. Requires administrator privileges.

```powershell
choco install fnm
```

--------------------------------

### Test fnm Command

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Verifies that the fnm command is accessible and working by displaying its help information.

```powershell
fnm -h
```

--------------------------------

### useTable Hook Configuration Example

Source: https://docs.soybeanjs.cn/guide/hooks/use-table

A JavaScript example demonstrating how to configure and use the useTable hook. It shows passing the API function, a data transformer, and column definitions to initialize the hook.

```javascript
import { useTable } from '@/hooks/common/table';
import { fetchGetUserList } from '@/api/userApi';

const { data, loading, pagination } = useTable({
  apiFn: fetchGetUserList,
  transformer: response => {
    const { records, total, current, size } = response.data;
    return {
      data: records,
      pageNum: current,
      pageSize: size,
      total
    };
  },
  columns: () => [
    {
      type: 'selection',
      align: 'center',
      width: 48
    },
    {
      key: 'index',
      title: 'index',
      align: 'center',
      width: 64
    },
    {
      key: 'userName',
      title: 'username',
      align: 'center',
      minWidth: 100
    }
  ]
});
```

--------------------------------

### Install Project Dependencies with pnpm

Source: https://docs.soybeanjs.cn/guide/quick-start

Installs all necessary project dependencies using the pnpm package manager. This command should be run after cloning the repository.

```bash
pnpm i
```

--------------------------------

### Install simple-git-hooks

Source: https://docs.soybeanjs.cn/standard/lint

Installs the `simple-git-hooks` package as a development dependency. This package helps manage Git hooks by automatically setting them up based on configurations in `package.json`.

```bash
pnpm i simple-git-hooks -D
```

--------------------------------

### Configure fnm for PowerShell

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Adds fnm environment configuration to PowerShell's profile script to enable automatic version switching on directory changes.

```powershell
fnm env --use-on-cd | Out-String | Invoke-Expression
```

--------------------------------

### VSCode Integrated Terminal Configuration

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Configures VSCode's integrated terminal to use a specific CMD profile on Windows, executing a bashrc.cmd script upon startup.

```json
"terminal.integrated.defaultProfile.windows": "Default Cmd",
"terminal.integrated.profiles.windows": {
  "Default Cmd": {
  "path": "C:\\Windows\\System32\\cmd.exe",
  "args": ["/k", "%USERPROFILE%\\bashrc.cmd"]
  }
}
```

--------------------------------

### Install Dependencies for Offline Iconify Icons

Source: https://docs.soybeanjs.cn/guide/icon/usage

Commands to install necessary packages for using Iconify icons offline. `@iconify/vue` provides the Vue component for rendering, and `@iconify/json` includes the icon collection data.

```bash
## Include icon component data
pnpm add @iconify/vue

## Include offline icon data
pnpm add @iconify/json
```

--------------------------------

### Example Route Configuration

Source: https://docs.soybeanjs.cn/zh/guide/router/intro

An example of a route configuration object, demonstrating how to set meta properties like title, i18nKey, and hideInMenu. This structure is used for defining specific routes within the application.

```typescript
{
    name: '403',
    path: '/403',
    component: 'layout.blank$view.403',
    meta: {
      title: '403',
      i18nKey: 'route.403',
      hideInMenu: true
    }
}
```

--------------------------------

### Set up FNM Environment in Zshrc

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Configures FNM to automatically manage Node.js versions based on the current directory by adding an eval command to the .zshrc file and then sourcing it.

```bash
eval "$(fnm env --use-on-cd)"
```

```bash
source ~/.zshrc
```

--------------------------------

### Configure fnm for CMD

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Modifies the Command Prompt shortcut properties to load fnm environment variables via a bashrc.cmd script, enabling version switching.

```cmd
@echo off
FOR /f "tokens=\*" %%z IN ('fnm env --use-on-cd') DO CALL %%z
```

--------------------------------

### Check Current NodeJS Version

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Displays the currently active Node.js version. This is useful for verifying the 'nvm use' command.

```bash
node -v
```

--------------------------------

### Vite Proxy Configuration Example

Source: https://docs.soybeanjs.cn/guide/request/proxy

Provides a concrete example of how to configure proxies in Vite using a JavaScript object. This configuration maps specific path prefixes to target servers, enabling custom proxy routing for different services.

```ts
{
  '/proxy-default': {
    target: 'https://default.com',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/proxy-default/, ''),
  },
  '/proxy-demo': {
    target: 'https://demo.com',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/proxy-demo/, ''),
  }
}
```

--------------------------------

### Vite Proxy Configuration Example

Source: https://docs.soybeanjs.cn/zh/guide/request/proxy

Demonstrates how to configure Vite proxy settings for different services, including target URLs, origin changes, and path rewriting.

```json
{
  '/proxy-default': {
    target: 'https://default.com',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/proxy-default/, ''),
  },
  '/proxy-demo': {
    target: 'https://demo.com',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/proxy-demo/, ''),
  }
}
```

--------------------------------

### Register Loading Function in main.ts

Source: https://docs.soybeanjs.cn/guide/theme/loading

This TypeScript snippet demonstrates how to register the `setupLoading` function before mounting the Vue application. This ensures the loading animation is displayed during the initial application setup phase.

```typescript
async function setupApp() {
  setupLoading();
  app.mount('#app');
}
```

--------------------------------

### Switch Active Node.js Version with FNM

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Switches the currently active Node.js version to 16, 14, or 12 using the fnm use command.

```other
fnm use 16
fnm use 14
fnm use 12
```

--------------------------------

### Configure Git Bash for FNM

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Adds FNM environment variables and path configurations to the .bash_profile for Git Bash, enabling fnm usage within the Git Bash terminal.

```bash
eval $(fnm env | sed 1d)
export PATH=$(cygpath $FNM_MULTISHELL_PATH):$PATH

if [[-f .node-version || -f .nvmrc]]; then
fnm use
fi
```

--------------------------------

### Add scripts for simple-git-hooks in package.json

Source: https://docs.soybeanjs.cn/standard/lint

Adds a `prepare` script to `package.json` that runs `simple-git-hooks` when the package is installed or updated. This ensures Git hooks are correctly registered.

```json
{
  "scripts": {
    "prepare": "simple-git-hooks"
  }
}
```

--------------------------------

### useHookTable Usage Example

Source: https://docs.soybeanjs.cn/zh/guide/hooks/use-table

A practical example demonstrating how to use the `useHookTable` hook directly within a Vue.js component. It shows the setup of API parameters, column definitions, data transformation, and the invocation of the `getData` function.

```vue
<script setup lang="tsx">
import { ref } from 'vue';
import { fetchGetUserList } from '@/service/api';
import useHookTable from '@sa/hooks';

const apiParams = ref({
  current: 1,
  size: 10
});

const columns = () => [
  {
    key: 'userName',
    title: 'User Name',
    align: 'center',
    minWidth: 100
  }
  // ...other column configurations
];

const getColumnChecks = columns => columns.map(column => ({ key: column.key, title: column.title, checked: true }));

const getColumns = (columns, checks) =>
  columns.filter(column => checks.find(check => check.key === column.key && check.checked));

const transformer = response => ({
  data: response.data,
  pageNum: response.pageNum,
  pageSize: response.pageSize,
  total: response.total
});

const { loading, empty, data, getData } = useHookTable({
  apiFn: fetchGetUserList,
  apiParams,
  transformer,
  columns,
  getColumnChecks,
  getColumns,
  immediate: true
});

// Call getData when needed, e.g., on component mount or refresh button click
getData();
</script>
```

--------------------------------

### Implement System Loading Animation in TypeScript

Source: https://docs.soybeanjs.cn/guide/theme/loading

This TypeScript function, `setupLoading`, creates a dynamic loading animation for system initialization. It uses theme colors to style a logo, rotating dots, and title text, then replaces the content of the '#app' DOM element with this animation. Dependencies include local storage for theme retrieval and a translation function.

```typescript
export function setupLoading() {
  const themeColor = localStg.get('themeColor') || '#DB5A6B';

  const { r, g, b } = getRgbOfColor(themeColor);

  const primaryColor = `--primary-color: ${r} ${g} ${b}`;

  const loadingClasses = [
    'left-0 top-0',
    'left-0 bottom-0 animate-delay-500',
    'right-0 top-0 animate-delay-1000',
    'right-0 bottom-0 animate-delay-1500'
  ];

  const logoWithClass = systemLogo.replace('<svg', `<svg class="size-128px text-primary"`);

  const dot = loadingClasses
    .map(item => {
      return `<div class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse ${item}"></div>`;
    })
    .join('\n');

  const loading = `
<div class="fixed-center flex-col" style="${primaryColor}">
  ${logoWithClass}
  <div class="w-56px h-56px my-36px">
    <div class="relative h-full animate-spin">
      ${dot}
    </div>
  </div>
  <h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>
</div>`;

  const app = document.getElementById('app');

  if (app) {
    app.innerHTML = loading;
  }
}
```

--------------------------------

### klona Usage Example

Source: https://docs.soybeanjs.cn/recommend/klona

Demonstrates deep cloning an object using klona. The example shows how modifying the cloned object does not affect the original source object.

```javascript
import { klona } from 'klona';

const input = {
  foo: 1,
  bar: {
    baz: 2,
    bat: {
      hello: 'world'
    }
  }
};

const output = klona(input);

// exact copy of original
// assert.deepStrictEqual(input, output); // For assertion in Node.js environment

// applying deep updates...
output.bar.bat.hola = 'mundo';
output.bar.baz = 99;

// ...doesn't affect source!
console.log(JSON.stringify(input, null, 2));
// {
//   "foo": 1,
//   "bar": {
//     "baz": 2,
//     "bat": {
//       "hello": "world"
//     }
//   }
// }
```

--------------------------------

### NodeJS バージョンの切り替え

Source: https://docs.soybeanjs.cn/jp/tutorial/nodejs

インストール済みの NodeJS バージョンを切り替えるための nvm コマンドです。指定したバージョンが現在の実行バージョンになります。

```bash
nvm use 18.20.5
```

--------------------------------

### Install lint-staged

Source: https://docs.soybeanjs.cn/standard/lint

Installs the `lint-staged` package as a development dependency. This tool allows running linters on Git staged files, ensuring code quality before commits.

```bash
pnpm i lint-staged -D
```

--------------------------------

### Install tsx CLI

Source: https://docs.soybeanjs.cn/tutorial/debug

Installs the tsx command-line tool globally, enabling zero-configuration execution of TypeScript files in Node.js. This is a prerequisite for debugging TypeScript code with tsx.

```bash
npm install -g tsx
```

--------------------------------

### nvm インストール (Windows)

Source: https://docs.soybeanjs.cn/jp/tutorial/nodejs

Windows 環境で nvm-windows をインストールするためのインストーラーへのリンクです。インストーラーをダウンロードして実行することでインストールできます。

```bash
https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.exe
```

--------------------------------

### useTable Usage Example

Source: https://docs.soybeanjs.cn/zh/guide/hooks/use-table

An example illustrating the usage of the `useTable` hook in a TypeScript context. It shows how to destructure the returned values and pass a configuration object to the `useTable` function for setting up table data fetching and display.

```typescript
const config = {
  apiFn: getUsers,
  apiParams: { page: 1, size: 10 },
  immediate: true,
  showTotal: true,
  columns: [
    {
      key: 'userName',
      title: '用户名',
      align: 'center',
      minWidth: 100
    }
    // More columns...
  ]
};

const { 
  loading, 
  empty, 
  data, 
  columns, 
  columnChecks, 
  reloadColumns, 
  pagination, 
  mobilePagination, 
  updatePagination, 
  getData, 
  searchParams, 
  updateSearchParams, 
  resetSearchParams 
} = useTable(config);
```

--------------------------------

### API Function Definition Example

Source: https://docs.soybeanjs.cn/guide/hooks/use-table

An example of defining an API function using TypeScript for fetching user list data. It utilizes a generic `request` function and specifies the expected parameter and response types.

```typescript
// api/userApi.js
import { request } from '../request';

// Define the API function to fetch the user list
export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
  return request<Api.SystemManage.UserList>({
    url: '/systemManage/getUserList',
    method: 'get',
    params
  });
}
```

--------------------------------

### Project .npmrc Configuration

Source: https://docs.soybeanjs.cn/faq

Details the configuration options in the project's .npmrc file, including registry mirror source, dependency hoisting, and workspace root check.

```config
registry=https://registry.npmmirror.com/
shamefully-hoist=true
ignore-workspace-root-check=true
```

--------------------------------

### Generated Route Configuration

Source: https://docs.soybeanjs.cn/guide/router/structure

Example of a generated route object, specifying name, path, component, props, and meta information for routing.

```ts
{
  name: 'user',
  path: '/user/:id',
  component: 'layout.base$view.user',
  props: true,
  meta: {
    title: 'user'
  }
}
```

--------------------------------

### Set Default Node.js Version with FNM

Source: https://docs.soybeanjs.cn/tutorial/nodejs

Sets Node.js version 14 as the default version to be used automatically when opening a new terminal session.

```other
fnm default 14
```

--------------------------------

### NodeJS バージョンのインストール

Source: https://docs.soybeanjs.cn/jp/tutorial/nodejs

nvm を使用して、指定したバージョンの NodeJS をインストールするコマンドです。例として NodeJS 18.20.5 をインストールします。

```bash
nvm install 18.20.5
```

--------------------------------

### klona Usage Example

Source: https://docs.soybeanjs.cn/zh/recommend/klona

Demonstrates how to use klona to deep copy an object. Changes to the cloned object do not affect the original.

```javascript
import { klona } from 'klona';

const input = {
  foo: 1,
  bar: {
    baz: 2,
    bat: {
      hello: 'world'
    }
  }
};

const output = klona(input);

// Deep update on the clone
output.bar.bat.hola = 'mundo';
output.bar.baz = 99;

// The original object remains unchanged
console.log(JSON.stringify(input, null, 2));
// {
//   "foo": 1,
//   "bar": {
//     "baz": 2,
//     "bat": {
//       "hello": "world"
//     }
//   }
// }
```

--------------------------------

### 現在使用中の NodeJS バージョン確認

Source: https://docs.soybeanjs.cn/jp/tutorial/nodejs

現在アクティブな NodeJS のバージョンを確認するためのコマンドです。

```bash
node -v
```