### Install Snail-uni Project Creation Tool

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/quick-start.md

Use npm, pnpm, yarn, or bun to create a new Snail-uni project. This command initiates an interactive setup process.

```bash
npm create snail-uni@latest
```

```bash
pnpm create snail-uni 
```

```bash
yarn create snail-uni 
```

```bash
bun create snail-uni 
```

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

### Install uni-ui with pnpm

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/ui-use.md

Install the uni-ui component library using pnpm.

```sh
pnpm add  @dcloudio/uni-ui
```

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

### Install uv-ui with pnpm

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/ui-use.md

Install the uv-ui component library using pnpm.

```sh
pnpm add uv-ui
```

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

### Install uview-plus with pnpm

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/ui-use.md

Install the uview-plus component library using pnpm.

```sh
pnpm add uview-plus
```

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

### Define Pinia Store with Composition API (Setup Store)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Utilize the Composition API (Setup Store) for a more flexible and powerful Pinia store definition. This example demonstrates managing a counter and a name.

```typescript
// store/modules/counter.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore(
  'counter',
  () => {
    // state - 使用 ref()
    const count = ref(0)
    const name = ref('Snail-Uni')

    // getters - 使用 computed()
    const doubleCount = computed(() => count.value * 2)
    const greeting = computed(() => `Hello, ${name.value}!`)

    // actions - 使用 function
    function increment() {
      count.value++
    }

    function decrement() {
      count.value--
    }

    function setName(newName: string) {
      name.value = newName
    }

    // 必须返回所有需要暴露的属性和方法
    return {
      count,
      name,
      doubleCount,
      greeting,
      increment,
      decrement,
      setName
    }
  }
)

// 使用示例
// <script setup lang="ts">
// const counterStore = useCounterStore()
// counterStore.increment()
// console.log(counterStore.doubleCount) // 2
// </script>
```

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

### Run Development Server (WeChat Mini Program)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Start the development server for WeChat Mini Program using npm or pnpm.

```bash
npm run dev
# or
pnpm dev
```

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

### Configure Pinia Persistence Plugin

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Integrate pinia-plugin-unistorage to enable state persistence. This example shows basic setup in main.ts and configuration within a store.

```typescript
// src/main.ts - 配置持久化插件
import { createSSRApp } from 'vue'
import App from './App.vue'
import * as Pinia from 'pinia'
import { createUnistorage } from 'pinia-plugin-unistorage'

export function createApp() {
  const app = createSSRApp(App)
  const store = Pinia.createPinia()
  store.use(createUnistorage())
  app.use(store)
  return {
    app,
    Pinia,  // 必须返回 Pinia，否则不生效
  }
}

// store/modules/counter.ts - 使用持久化
export const useCounterStore = defineStore(
  'counter',
  () => {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    function increment() {
      count.value++
    }
    return { count, doubleCount, increment }
  },
  {
    // 开启持久化 - 缓存所有 state
    unistorage: true,
  }
)

// 高级配置 - 仅缓存指定字段
export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null,
    tempData: ''  // 不需要持久化
  }),
  unistorage: {
    key: 'user-store',  // 自定义缓存键名
    paths: ['token', 'userInfo'],  // 仅持久化这些字段
    // 钩子函数
    beforeRestore(ctx) {
      console.log('恢复前触发')
    },
    afterRestore(ctx) {
      console.log('恢复后触发')
    },
  },
})
```

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

### Run Development Server (H5)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Start the development server for H5 using npm or pnpm.

```bash
npm run dev:h5
# or
pnpm dev:h5
```

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

### Setup Store Definition (JavaScript)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Defines a counter store using Pinia's Setup Store pattern in JavaScript. Utilizes refs for state, computed for getters, and functions for actions.

```javascript
import { defineStore } from 'pinia';
import { ref } from 'vue';
export const useCounterStore = defineStore(
  'counter',
  () => {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }
    return { count, doubleCount, increment };
  }
);

```

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

### Install Iconify Icon Library

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/icon.md

Commands for installing the '@iconify-json/icon-park-outline' package using npm, pnpm, or yarn.

```sh
npm install @iconify-json/icon-park-outline -D
```

```sh
pnpm add  @iconify-json/icon-park-outline -D
```

```sh
yarn add  @iconify-json/icon-park-outline -D
```

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

### Install Pinia Plugin Persistedstate (pnpm)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Command to install the pinia-plugin-persistedstate package using pnpm.

```sh
pnpm add pinia-plugin-persistedstate

```

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

### Install Pinia Plugin Persistedstate (npm)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Command to install the pinia-plugin-persistedstate package using npm.

```sh
npm install pinia-plugin-persistedstate

```

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

### Install Pinia Plugin Persistedstate (yarn)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Command to install the pinia-plugin-persistedstate package using yarn.

```sh
yarn add pinia-plugin-persistedstate

```

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

### Run Development Server

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/quick-start.md

Start the local development server with hot-reloading using npm, pnpm, yarn, or bun. The default configuration targets WeChat Mini Program.

```bash
npm run dev
```

```bash
pnpm run dev # or pnpm dev
```

```sh
yarn dev
```

```bash
bun run dev
```

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

### Setup Store Definition (TypeScript)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Defines a counter store using Pinia's Setup Store pattern in TypeScript. Utilizes refs for state, computed for getters, and functions for actions.

```typescript
import { defineStore } from 'pinia';
// snail-uni 自动导入可以不用引入
import { ref } from 'vue';
export const useCounterStore = defineStore(
  'counter',
  () => {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }
    return { count, doubleCount, increment };
  }
);


```

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

### Install Tuniao UI Uniapp V3 with pnpm

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/ui-use.md

Install the Tuniao UI Uniapp V3 component library and its related packages using pnpm.

```sh
pnpm add @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style
```

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

### Axios Multi-Domain Configuration Example (.env.development)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/axios.md

Example of configuring a secondary server address for multi-domain requests in the development environment. This can be used when different API endpoints are hosted on different domains.

```sh
# env.development
VITE_SERVER_BASEURL_2 = 'https://xxx'

```

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

### UniPages Route Block Example (Other Page)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/uni-plugins.md

Example of a route block configuration for a non-home page, specifying navigation bar title and route name in JSON format.

```vue
<!-- other.vue -->
<route lang="json">
{
  "style": { "navigationBarTitleText": "其他" },
  "name": "other"
}
</route>
```

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

### Navigate To with Parameters (uni-app)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/router.md

Example of using uni.navigateTo to navigate to a page and pass query parameters.

```typescript
uni.navigateTo({
 url: 'test?id=1&name=snail-uni'
});
```

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

### Axios API Request Component Example (Vue)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/axios.md

Demonstrates how to call an API function within a Vue component and handle the response. This example shows triggering the `getChannel` API on a button click and logging the result.

```vue
<template>
  <button type="primary" @click="onGetChannel">获取栏目频道</button>
</template>

<script setup lang="ts">
import { getChannel } from '@/apis/user'

const onGetChannel = async () => {
  await getChannel({ id: 1 }).then((res) => {
    console.log(res)
  })
}
</script>

```

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

### Configure Pinia Plugin Persistedstate

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Setup for pinia-plugin-persistedstate in `src/store/index.ts`, configuring storage to use uni.getStorageSync and uni.setStorageSync.

```typescript
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'

const store = createPinia()
store.use(
  createPersistedState({
    storage: {
      getItem: uni.getStorageSync,
      setItem: uni.setStorageSync,
    },
  }),
)

export default store

```

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

### Using Icons with tuniao-ui

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/icon.md

Provides examples for using icons from the tuniao-ui library, including options for primary type, custom color, and transparent background.

```vue
<TnIcon name="logo-tuniao" type="primary" />
<TnIcon name="logo-tuniao" color="tn-blue" />
<TnIcon name="logo-tuniao" transparent transparent-bg="tn-green" />
```

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

### Stylelint Configuration for Snail-Uni

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/code-style.md

This configuration extends the base Stylelint rules provided by the snail-uni package. Ensure `@snail-uni/stylelint-config` is installed.

```json
//.stylelintrc.json
{
  "root": true,
  "extends": ["@snail-uni/stylelint-config"]
}
```

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

### Run Development Server

Source: https://github.com/hu-snail/snail-uni/blob/main/README.md

Commands to start the local development server for Snail-uni projects using different package managers. By default, it launches the WeChat Mini Program.

```sh
# npm
npm run dev
# pnpm
pnpm dev
# Yarn
yarn dev
# Bun
bun run dev
```

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

### Configure Stylelint with Presets

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Use this configuration to extend Snail-Uni's predefined stylelint settings for SCSS and Vue SFCs. Ensure the '@snail-uni/stylelint-config' package is installed.

```javascript
// .stylelintrc.json - 使用预设配置
{
  "extends": ["@snail-uni/stylelint-config"]
}
```

```javascript
// 预设配置内容 - packages/snail-stylelint-config/index.js
module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-recommended-scss',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-html/vue',
    'stylelint-config-recess-order',
  ],
  plugins: ['stylelint-prettier'],
  rules: {
    'prettier/prettier': true,
    // 支持 uni-app 特有单位 rpx
    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
    // 支持 page 选择器
    'selector-type-no-unknown': [true, { ignoreTypes: ['page'] }],
    // 支持 v-deep 等 Vue 伪类
    'selector-pseudo-class-no-unknown': [
      true,
      { ignorePseudoClasses: ['global', 'export', 'v-deep', 'deep'] },
    ],
  },
}
```

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

### VS Code Extensions Configuration

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/code-style.md

This file configures recommended VS Code extensions for the project. Ensure these extensions are installed for optimal development experience.

```sh
├── .vscode
│   └── extensions.json
```

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

### Pinia Store with Persistedstate (Options API)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Example of defining a Pinia store using the Options API with the 'persist: true' option for state persistence.

```typescript
iimport { defineStore } from 'pinia'

const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),

  getters: {
    doubleCount: (state) => state.count * 2,
  },

  actions: {
    increment() {
      this.count++
    }
  },
  persist: true,
})

```

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

### Route Guard Setup (uni-app)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/router.md

Configures uni-app's navigation interceptors to implement route guards for navigation events like navigateTo, reLaunch, and redirectTo.

```typescript
import { useUserStore } from '@/store';
import { isWhiteList } from '@/router';

const navigateToInterceptor = {
  invoke({ url }: { url: string }) {
    // 判断是否登录
    if (useUserStore().token) {
      return true;
    }
    else {
      const flag = isWhiteList(url);
      if (!flag) return uni.navigateTo({ url: '/sub-pages/login/index' });
      return flag;
    }
  },
};

export const routeInterceptor = {
  install() {
    uni.addInterceptor('navigateTo', navigateToInterceptor);
    uni.addInterceptor('reLaunch', navigateToInterceptor);
    uni.addInterceptor('redirectTo', navigateToInterceptor);
  },
};
```

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

### UniPages Route Block Example (JSON)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/uni-plugins.md

Defines route configuration for a home page using JSON within a route block. Specifies navigation bar title and route name.

```vue
<route type="home" lang="json">
{
  "style": { "navigationBarTitleText": "首页" },
  "name": "home"
}
</route>
```

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

### Pinia Store with Persistedstate (Composition API)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Example of defining a Pinia store using the Composition API with the 'persist: true' option for state persistence.

```typescript
import { defineStore } from 'pinia';

export const useCounterStore = defineStore(
  'counter',
  () => {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }
    return { count, doubleCount, increment };
  },
  {
    persist: true,
  },
);


```

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

### Snail-uni Package.json Scripts

Source: https://github.com/hu-snail/snail-uni/blob/main/README.md

Configuration for development and build scripts within the package.json file. The 'dev' script starts a local development server with hot updates, and 'build' compiles the application for deployment.

```json
{
  "scripts": {
    "dev": "uni -p mp-weixin",
    "dev:h5": "uni",
    "build": "uni build -p mp-weixin",
    "build:h5": "uni build"
  },
}
```

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

### Pinia Store with Unistorage (Options API)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Example of defining a Pinia store using the Options API with the unistorage option enabled for automatic state caching.

```typescript
iimport { defineStore } from 'pinia'

const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),

  getters: {
    doubleCount: (state) => state.count * 2,
  },

  actions: {
    increment() {
      this.count++
    }
  },
  unistorage: true,
})

```

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

### Pinia Store with Unistorage (Composition API)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Example of defining a Pinia store using the Composition API with the unistorage option enabled for automatic state caching.

```typescript
import { defineStore } from 'pinia';

export const useCounterStore = defineStore(
  'counter',
  () => {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }
    return { count, doubleCount, increment };
  },
  {
    unistorage: true,
  },
);

```

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

### Define Pinia Store with Options API

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Use the Options API to define a Pinia store, suitable for developers accustomed to traditional Vue styles. This example shows how to manage user information and authentication tokens.

```typescript
// store/modules/user.ts
import { defineStore } from 'pinia'

interface IUserInfo {
  nickName: string
  avatarUrl: string
  userId: string
  gender: number
}

const initUserState: IUserInfo = {
  nickName: '',
  avatarUrl: '',
  userId: '',
  gender: 0,
}

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: { ...initUserState } as IUserInfo,
    Authorization: 'SNAIL_UNI00000001',
  }),

  getters: {
    nickName: (state) => state.userInfo.nickName,
    isLoggedIn: (state) => !!state.Authorization,
  },

  actions: {
    /** 设置用户信息 */
    setUserInfo(data: IUserInfo) {
      this.userInfo = data
    },

    /** 设置请求 token */
    setToken(token: string) {
      this.Authorization = token
    },

    /** 退出登录 */
    logout() {
      this.userInfo = { ...initUserState }
      this.Authorization = ''
    }
  }
})

// 使用示例
// <script setup lang="ts">
// const userStore = useUserStore()
// userStore.setToken('new-token-value')
// console.log(userStore.nickName)
// </script>
```

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

### Axios API Request Function Example (TypeScript)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/axios.md

Defines a function to make an API request using the configured Axios instance. It allows overriding global loading and error display settings for individual requests. Ensure the base URL configuration matches your setup.

```ts
import { request } from '@/utils/request'
// 多域名情况配置， 默认为 `VITE_SERVER_BASEURL` 配置的域名，不需要填写baseURL
const { VITE_SERVER_BASEURL_2: baseURL } = import.meta.env;

export const getChannel = (params: any) => {
  return request({
    url: `/station/v1/channel/base/tree`,
    method: 'get',
    params,
    baseURL,
    loading: false,
    showError: false,
  });
};

```

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

### Create Snail-Uni Project with npm (Positional Arguments)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Create a full-featured Snail-Uni project using npm and positional arguments for configuration.

```bash
npm create snail-uni snail-uni-app ts tabbar eslint Wot-Design
```

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

### Create Snail-Uni Project with npm (CLI Arguments)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Create a TypeScript project with Uv-ui and ESLint using npm and CLI arguments.

```bash
npm create snail-uni@latest my-snail-app --t uni-ts --ui Uv-ui --lint yes
```

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

### UniLayouts Default Layout Example

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/uni-plugins.md

Example of a default layout component for vite-plugin-uni-layouts. It includes a slot for rendering page content.

```vue
<!-- default.vue -->
<template>
  <view class="defaul-app-layout">
    <slot />
  </view>
</template>
```

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

### Create Snail-uni Project with Detailed Arguments

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/quick-start.md

Create a Snail-uni project by providing arguments for language type, tabbar usage, linting, and UI library. Supports npm, pnpm, yarn, and bun.

```bash
# 创建 ts、tabbar、eslint版本 
npm create snail-uni snail-uni-app ts tabbar eslint
# 创建 js、tabbar、eslint版本
npm create snail-uni snail-uni-app js tabbar eslint
# 创建 ts、tabbar, 不使用 eslint版本
npm create snail-uni snail-uni-app ts tabbar
# 创建 js、tabbar, 不使用 eslint版本
npm create snail-uni snail-uni-app js tabbar
# 创建ts、不需要tabbar 不需要eslint
npm create snail-uni snail-uni-app ts
# 创建js、不需要tabbar 不需要eslint
npm create snail-uni snail-uni-app
# 创建指定ui库版本 Wot-Design | Uv-ui | Uview-plus | TuniaoUI
npm create snail-uni snail-uni-app ts tabbar eslint Uv-ui
```

```bash
# 创建 ts、tabbar、eslint版本 
pnpm create snail-uni snail-uni-app ts tabbar eslint
# 创建 js、tabbar、eslint版本
pnpm create snail-uni snail-uni-app js tabbar eslint
# 创建 ts、tabbar, 不使用 eslint版本
pnpm create snail-uni snail-uni-app ts tabbar
# 创建 js、tabbar, 不使用 eslint版本
pnpm create snail-uni snail-uni-app js tabbar
# 创建ts、不需要tabbar 不需要eslint
pnpm create snail-uni snail-uni-app ts
# 创建js、不需要tabbar 不需要eslint
pnpm create snail-uni snail-uni-app
# 创建指定ui库版本  Wot-Design | Uv-ui | Uview-plus | TuniaoUI
pnpm create snail-uni snail-uni-app ts tabbar eslint Uv-ui
```

```bash
# 创建 ts、tabbar、eslint版本
yarn create snail-uni snail-uni-app ts tabbar eslint
# 创建 js、tabbar、eslint版本
yarn create snail-uni snail-uni-app js tabbar eslint
# 创建 ts、tabbar, 不使用 eslint版本
yarn create snail-uni snail-uni-app ts tabbar
# 创建 js、tabbar, 不使用 eslint版本
yarn create snail-uni snail-uni-app js tabbar
# 创建ts、不需要tabbar 不需要eslint
yarn create snail-uni snail-uni-app ts
# 创建js、不需要tabbar 不需要eslint
yarn create snail-uni snail-uni-app
# 创建指定ui库版本  Wot-Design | Uv-ui | Uview-plus | TuniaoUI
yarn create snail-uni snail-uni-app ts tabbar eslint Uv-ui
```

```bash
# 创建 ts、tabbar、eslint版本
bun create snail-uni snail-uni-app ts tabbar eslint
# 创建 js、tabbar、eslint版本
bun create snail-uni snail-uni-app js tabbar eslint
# 创建 ts、tabbar, 不使用 eslint版本
bun create snail-uni snail-uni-app ts tabbar
# 创建 js、tabbar, 不使用 eslint版本
bun create snail-uni snail-uni-app js tabbar
# 创建ts、不需要tabbar 不需要eslint
bun create snail-uni snail-uni-app ts
# 创建js、不需要tabbar 不需要eslint
bun create snail-uni snail-uni-app
# 创建指定ui库版本  Wot-Design | Uv-ui | Uview-plus | TuniaoUI
bun create snail-uni snail-uni-app ts tabbar eslint Uv-ui
```

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

### Create Snail-uni Project with Options (Method 1)

Source: https://github.com/hu-snail/snail-uni/blob/main/README.md

Create a Snail-uni project specifying the template, UI library, and linting options. Supports 'uni-ts', 'uni-tabbar-ts', 'uni-js', 'uni-tabbar-js' templates and various UI libraries.

```sh
# npm
npm create snail-uni@latest my-snail-app --t uni-ts --ui Uv-ui  --lint yes
# pnpm
pnpm create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
# yarn
yarn create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
# bun
bun create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
```

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

### Build Project (WeChat Mini Program)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Build the project for WeChat Mini Program using npm or pnpm.

```bash
npm run build
# or
pnpm build
```

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

### Create Snail-uni Project with Options

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/quick-start.md

Create a Snail-uni project specifying project name, template, UI library, and linting. Supports npm, pnpm, yarn, and bun.

```bash
npm create snail-uni@latest my-snail-app --t uni-ts --ui Uv-ui  --lint yes
```

```bash
pnpm create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
```

```bash
yarn create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
```

```bash
bun create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
```

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

### Create Snail-Uni Project with npm

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Use npm to create a new Snail-Uni project using the interactive CLI.

```bash
npm create snail-uni@latest
```

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

### Create Snail-Uni Project with bun

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Use bun to create a new Snail-Uni project using the interactive CLI.

```bash
bun create snail-uni
```

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

### Create Snail-Uni Project with pnpm (CLI Arguments)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Create a TypeScript project with a Tabbar and ESLint using pnpm and CLI arguments.

```bash
pnpm create snail-uni my-app --t uni-tabbar-ts --ui Wot-Design --lint yes
```

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

### Redirect To (uni-app)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/router.md

Example of using uni.redirectTo to close the current page and navigate to another.

```typescript
uni.redirectTo({
 url: 'test?id=1'
});
```

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

### Create Snail-Uni Project with Options (npm)

Source: https://github.com/hu-snail/snail-uni/blob/main/create-snail-uni/README.md

Create a snail-uni project specifying template, UI library, and linting options. Supports npm, pnpm, yarn, and bun.

```sh
# npm
npm create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
# pnpm
pnpm create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
# yarn
yarn create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
# bun
bun create snail-uni my-snail-app --t uni-ts --ui Uv-ui  --lint yes
```

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

### Create Snail-Uni Project (npm)

Source: https://github.com/hu-snail/snail-uni/blob/main/create-snail-uni/README.md

Use this command to initiate a new snail-uni project. Supports npm, pnpm, yarn, and bun.

```sh
# npm
npm create snail-uni
# pnpm
pnpm create snail-uni 
# yarn
yarn create snail-uni
# bun
bun create snail-uni
```

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

### Create Snail-Uni Project with yarn (Positional Arguments)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Create a JavaScript project with a Tabbar using yarn and positional arguments.

```bash
yarn create snail-uni my-app js tabbar
```

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

### Switch Tab (uni-app)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/router.md

Example of using uni.switchTab to navigate to a tabBar page and close other non-tabBar pages.

```typescript
uni.switchTab({
 url: '/pages/index/index'
});
```

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

### ESLint Configuration for Snail-Uni

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/code-style.md

This configuration extends the base ESLint rules provided by the snail-uni package. Ensure `@snail-uni/eslint-config` is installed.

```json
// .eslintrc.json
{
  "root": true,
  "extends": ["@snail-uni/eslint-config"]
}
```

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

### Remove Pinia Plugin Unistorage Configuration

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/pinia.md

Code snippet showing how to remove the pinia-plugin-unistorage usage from the main Pinia setup in `src/main.ts`.

```typescript
// src/main.ts
import { createSSRApp } from 'vue';
import App from './App.vue';

import * as Pinia from 'pinia'; // [!code --]
// @docs https://github.com/dishait/pinia-plugin-unistorage?tab=readme-ov-file#readme
import { createUnistorage } from 'pinia-plugin-unistorage'; // [!code --]

export function createApp() {
  const app = createSSRApp(App);
  const store = Pinia.createPinia(); // [!code --]
  store.use(createUnistorage()); // [!code --]
  app.use(store); // [!code --]
  return {
    app,
    Pinia, // [!code --] 
  };
}


```

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

### Create Snail-Uni Project with Language and Features (npm)

Source: https://github.com/hu-snail/snail-uni/blob/main/create-snail-uni/README.md

Create a snail-uni project by specifying language type, tabbar usage, linting, and UI library. Supports npm, pnpm, yarn, and bun.

```sh
# npm
# 创建 ts、tabbar、eslint版本 
npm create snail-uni snail-uni-app ts tabbar eslint
# pnpm
pnpm create snail-uni snail-uni-app ts tabbar eslint
# yarn
yarn create snail-uni snail-uni-app ts tabbar eslint
# bun
bun create snail-uni snail-uni-app ts tabbar eslint
```

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

### Build Project (H5)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Build the project for H5 using npm or pnpm.

```bash
npm run build:h5
# or
pnpm build:h5
```

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

### Basic Navigation with uni-mini-router

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Demonstrates basic navigation methods like push, named routes, and query parameters using the useRouter hook.

```vue
<script setup lang="ts">
// 获取路由实例（推荐使用 hooks）
const router = useRouter()

// 字符串路径跳转
router.push('/user')

// 带路径的对象方式跳转
router.push({ path: '/user' })

// 命名路由 + 参数方式
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数跳转，结果是 /user?username=eduardo
router.push({ path: '/user', query: { username: 'eduardo' } })

// 接收页面参数
onLoad((option) => {
  if (option && option.username) {
    const username = option.username
    console.log('用户名:', username)
  }
})
</script>

<!-- 路由名称定义（在页面组件中） -->
<route type="home" lang="json">
{
  "style": { "navigationBarTitleText": "首页" },
  "name": "home"
}
</route>
```

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

### uni-mini-router Basic Usage

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/router.md

Demonstrates basic navigation methods using uni-mini-router's `useRouter` hook, including pushing to routes by path, name, and with query parameters.

```APIDOC
## uni-mini-router Basic Usage

### Description
This section covers the fundamental ways to navigate between pages using the `useRouter` hook provided by uni-mini-router.

### Method
`useRouter()` hook and its methods like `push()`.

### Code Example
```vue
<script setup lang="ts">
// Using hooks (recommended)
let router = useRouter()

// String path
router.push('/user')

// Object with path
router.push({ path: '/user' })

// Named routes with parameters
router.push({ name: 'user', params: { username: 'eduardo' } })

// With query parameters, results in /user?username=eduardo
router.push({ path: '/user', query: { username: 'eduardo' } })
</script>
```

### Route Definition Example
```vue
<route type="home" lang="json">
{
  "style": { "navigationBarTitleText": "首页" },
  "name": "home"
}
</route>
```

### Receiving Parameters
```vue
<script setup lang="ts">
onLoad((option) => {
  if (option && option.username) {
    const username = option.username
  }
})
</script>
```
```

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

### Basic Navigation with uni-mini-router

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/router.md

Demonstrates how to navigate to different routes using the useRouter hook. Supports string paths, path objects, named routes with parameters, and query parameters.

```vue
<script setup lang="ts">
// 使用hooks（推荐）
let router = useRouter()

// 字符串路径
router.push('/user')

// 带有路径的对象
router.push({ path: '/user' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /user?username=eduardo
router.push({ path: '/user', query: { username: 'eduardo' } })

</script>
```

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

### Create Snail-Uni Project with yarn

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Use yarn to create a new Snail-Uni project using the interactive CLI.

```bash
yarn create snail-uni
```

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

### Create Snail-uni Project (Command-Oriented)

Source: https://github.com/hu-snail/snail-uni/blob/main/README.md

Use these commands to create a new Snail-uni project with your preferred package manager.

```sh
# npm
npm create snail-uni@latest
# pnpm
pnpm create snail-uni 
# yarn
yarn create snail-uni
# bun
bun create snail-uni
```

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

### Using UnoCSS Icons in Vue Template

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/icon.md

Example of how to use an Iconify icon (e.g., 'add-four' from 'icon-park-outline') within a Vue template using its prefixed class name.

```vue
<template>
  <button class="sn-icon-park-outline:add-four" />
</template>
```

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

### ReLaunch (uni-app)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/router.md

Demonstrates using uni.reLaunch to close all pages and open a new one.

```typescript
uni.reLaunch({
 url: 'test?id=1'
});
```

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

### Create Snail-Uni Project with pnpm

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Use pnpm to create a new Snail-Uni project using the interactive CLI.

```bash
pnpm create snail-uni
```

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

### Create Snail-Uni Project with pnpm (Positional Arguments)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Create a TypeScript Snail-Uni project without Tabbar or ESLint using pnpm and positional arguments.

```bash
pnpm create snail-uni my-app ts
```

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

### Page Configuration with @uni-helper/vite-plugin-uni-pages

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Configures global styles, easycom component auto-import, and tabBar for uni-app pages. Defines navigation bar appearance, component matching rules, and tab bar items with icons and paths.

```typescript
// pages.config.ts
import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'

export default defineUniPages({
  // 全局样式配置
  globalStyle: {
    navigationStyle: 'default',
    navigationBarTitleText: 'Snail-Uni',
    navigationBarBackgroundColor: '#FFFFFF',
    navigationBarTextStyle: 'black',
    backgroundColor: '#FFFFFF',
  },

  // easycom 组件自动导入配置
  easycom: {
    autoscan: true,
    custom: {
      // 自定义组件前缀匹配规则
      '^su-(.*)': '@/components/su-$1.vue',
      // Wot Design UI 组件
      '^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
      // Uv-ui 组件
      // '^uv-(.*)': '@climblee/uv-ui/components/uv-$1/uv-$1.vue',
      // Uview-plus 组件
      // '^u-([^-].*)': 'uview-plus/components/u-$1/u-$1.vue',
    },
  },

  // TabBar 配置
  tabBar: {
    color: '#999999',
    selectedColor: '#5474f2',
    backgroundColor: '#f5f5f5e6',
    borderStyle: 'white',
    height: '50px',
    fontSize: '12px',
    iconWidth: '24px',
    list: [
      {
        iconPath: '/static/tabbar/home_default.png',
        selectedIconPath: '/static/tabbar/home_active.png',
        pagePath: 'pages/index/index',
        text: '首页',
      },
      {
        iconPath: '/static/tabbar/my_default.png',
        selectedIconPath: '/static/tabbar/my_active.png',
        pagePath: 'pages/my/index',
        text: '我的',
      },
    ],
  },
})
```

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

### Set Home Route in Snail-Uni

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/question.md

Designate a Vue file as the home route by adding the 'type: home' attribute to its route configuration. This ensures the specified page loads first when the application starts.

```json
{
  "style": {
    "navigationBarTitleText": "首页",
  }
}
```

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

### Using Icons with wot-design-ui

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/icon.md

Demonstrates how to use icons from the wot-design-ui library by setting the 'name' attribute. Supports customization of icon size and color.

```vue
<wd-icon name="add-circle" />
<!--  通过 size 属性设置图标大小 -->
<wd-icon name="add-circle" size="20px" />
<!--  通过 color 属性设置图标颜色 -->
<wd-icon name="add-circle" color="#409EFF" />
```

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

### VS Code Settings for Formatting and Linting

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/code-style.md

Configure VS Code to use Prettier as the default formatter and enable auto-formatting on save. This setup also includes enabling ESLint and Stylelint for automatic code fixes.

```json
{
  // 默认格式化工具选择prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存的时候自动格式化
  "editor.formatOnSave": true,
  //开启自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  // 配置stylelint检查的文件类型范围
  "stylelint.validate": ["css", "scss", "vue", "html"], // 与package.json的scripts对应
  "stylelint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "[shellscript]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "[dotenv]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 配置语言的文件关联
  "files.associations": {
    "pages.json": "jsonc", // pages.json 可以写注释
    "manifest.json": "jsonc" // manifest.json 可以写注释
  },

  "typescript.tsdk": "node_modules\typescript\lib",
 
}
```

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

### Auto-import uni-app onLaunch hook

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/uni-plugins.md

Demonstrates the auto-import of the `onLaunch` hook from uni-app. This hook is executed when the application is launched.

```vue
<script setup lang="ts">
  onLaunch(() => {
    console.log('App Launch');
  });
</script>
```

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

### Build Project for Deployment

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/quick-start.md

Build the Snail-uni application for deployment using npm, pnpm, yarn, or bun. The default configuration builds for WeChat Mini Program.

```bash
npm run build
```

```bash
pnpm run build # or pnpm build
```

```bash
yarn build
```

```bash
bun run build
```

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

### Environment Variable Configuration (.env files)

Source: https://context7.com/hu-snail/snail-uni/llms.txt

Manages multi-environment configurations using .env files. Supports global, development, and production settings for various aspects like app IDs, API base URLs, and timeouts.

```bash
# env/.env - 全局配置（所有环境生效）
VITE_UNI_APPID = ''
VITE_WX_APPID = 'wx7dadae3892915697'
VITE_FALLBACK_LOCALE = 'zh-Hans'

# 请求相关配置
VITE_TOKEN_KEY = 'token'
VITE_RESPONSE_CODE_KEY = 'code'
VITE_RESPONSE_MSG_KEY = 'msg'
VITE_SHOW_LOADING = true
VITE_SHOW_ERROR = true
VITE_REQUEST_TIMEOUT = 10000
VITE_CONTENT_TYPE = 'application/json;charset=UTF-8'
VITE_SUCCESS_CODE = [200,0]

# H5 代理配置
VITE_PROXY_ENABLED = false
VITE_PROXY_PREFIX = '/api'
VITE_APP_PORT = 8090

# 路由配置
VITE_OPNE_NO_LOGIN = true

# env/.env.development - 开发环境
NODE_ENV = 'development'
VITE_DELETE_CONSOLE = false
VITE_SHOW_SOURCEMAP = true
VITE_SERVER_BASEURL = 'https://dev-api.example.com'

# env/.env.production - 生产环境
NODE_ENV = 'production'
VITE_DELETE_CONSOLE = true
VITE_SHOW_SOURCEMAP = false
VITE_SERVER_BASEURL = 'https://api.example.com'

# 在代码中使用环境变量
# const { VITE_SERVER_BASEURL } = import.meta.env
```

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

### Using Icons with uv-ui

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/icon.md

Shows how to implement icons from the uv-ui component library using the 'name' prop. Allows for dynamic adjustment of icon color and size.

```vue
<uv-icon name="photo"></uv-icon>
<uv-icon name="photo" color="#2979ff" size="28"></uv-icon>
```

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

### Configure Vite Plugins for Uni-App

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/uni-plugins.md

Integrates multiple uni-helper Vite plugins for automated uni-app development features. Ensure Unixx is imported before Uni().

```typescript
// 插件注意： Unixx需要在Uni()之前引入
plugins: [
  // uni-app pages配置 会根据route配置，自动生成路由
  UniPages({
    // 排除组件文件
    exclude: ['**/components/**/**.*'],
    // 'json5' | 'json' | 'yaml' | 'yml', 具体使用参看文档：https://uni-helper.js.org/vite-plugin-uni-pages
    routeBlockLang: 'json5',
    dts: 'src/types/uni-pages.d.ts',
    // 配置分包目录
    subPackages: ['src/sub-pages'],
  }),
  UniPlatform(),
  UniLayouts(),
  UniManifest(),
  Uni(),
]
```

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

### Using Icons with uview-plus

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/icon.md

Illustrates the usage of icons from the uview-plus library via the 'name' attribute. Icon size and color can be modified.

```vue
<up-icon name="photo"></up-icon>
<up-icon name="photo" color="#2979ff" size="28"></up-icon>
```

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

### Navigate Back (uni-app)

Source: https://github.com/hu-snail/snail-uni/blob/main/docs/guide/router.md

Shows how to use uni.navigateBack to return to a previous page or multiple pages using the delta parameter.

```typescript
// 此处是A页面
uni.navigateTo({
 url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
 url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
 delta: 2
});
```

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

### Build Snail-uni Application

Source: https://github.com/hu-snail/snail-uni/blob/main/README.md

Commands to build the Snail-uni application for deployment using different package managers. By default, it builds for the WeChat Mini Program.

```sh
# npm
npm run build
# pnpm
pnpm build
# Yarn
yarn build
# Bun
bun run build
```