快速开始

兼容性注意

Snail-uni 要求 Node.js 版本 18+ 或者 20+. 请注意升级你的 Node.js 版本！否则会导致项目无法正常运行！

前置准备

Node.js 18 及以上版本
pnpm - >=8.15.6（推荐使用 9.0.0）
VSCode 开发工具下载
HBuilderX - APP 的运行和发布需要
Git 安装

注：无需App开发，则无需下载HBuilderX

Vscode插件安装

snail-uni内置了插件安装配置文件，使用Vscode打开项目文件夹，点击安装插件即可安装插件。

shell

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

创建一个Snail-uni项目

snail-uni 附带一个命令行创建向导，可以帮助你构建一个基本项目。支持创建 js 与 ts 让你无需纠结。

注意

Snail-uni 要求 Node.js 版本 18+ 或者 20+. 请注意升级你的 Node.js 版本！否则会导致项目无法正常运行！

npmpnpmYarnBun

bash

npm create snail-uni@latest

bash

pnpm create snail-uni

bash

yarn create snail-uni

bash

bun create snail-uni

将需要回答几个简单的问题：

┌  欢迎使用snail-uni脚手架!
│
◇  项目名称:
│  snai-uni-app
│
◇   项目描述:
│  A snail-uni-app project
│
◆  选择 UI 框架:
│  ● wot-design-ui (推荐) 
│  ○ uv-ui
│  ○ uview-plus
│  ○ tuniao-ui
│  ○ nut-ui
│  ○ uni-ui
│
◆  是否使用 TypeScript?
│  ● Yes  / ○ No
│
◆  是否启用 Tabbar?
│  ● Yes  / ○ No
│
◆  是否使用Eslint代码规范?
│  ● Yes  / ○ No
│
└  🎉 你已成功创建! 现在请使用 pnpm 安装/运行你的项目

   进入项目： cd snail-uni-app
   安装依赖： pnpm install （安装前，请检查Node版本>= 18.0.0 ）
   运行项目： pnpm dev （默认运行微信小程序）
   snail-uni文档： https://hu-snail.github.io/snail-uni

Tabbar说明

Snail-uni 使用uni-app原生导航，自定义导航性能不如原生，非必要不建议使用自定义！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板, 例如：不指定类型默认为 js 版本且其他都默认关闭！支持两种创建语法：

方式一

npm create snail-uni <project-name> --t <template-name 模板名称> --ui <ui库（Wot-Design/Uv-ui/Uview-plus/TuniaoUI> --lint <yes/no）>

npmpnpmYarnBun

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

支持以下模板：uni-ts、uni-tabbar-ts、uni-js、uni-tabbar-js
支持以下ui库：Wot-Design、Uv-ui、Uview-plus、TuniaoUI

方式二

npm create snail-uni <project-name> <语言类型（js/ts）> <是否使用（tabbar/no)> <是否使用代码检查（eslint/no）> <ui库（Wot-Design/Uv-ui/Uview-plus/TuniaoUI）>

npmpnpmYarnBun

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

执行完之后，将生成一个新的项目

└  🎉 你已成功创建! 现在请使用 pnpm 安装/运行你的项目

   进入项目： cd snail-uni-app
   安装依赖： pnpm install （安装前，请检查Node版本>= 18.0.0 ）
   运行项目： pnpm dev （默认运行微信小程序）
   snail-uni文档： https://hu-snail.github.io/snail-uni

启动并运行

snail-uni 启动运行脚本在package.json中配置：

json

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

dev 脚本将启动具有即时热更新的本地开发服务器。使用以下命令运行它：

默认启动微信小程序,根据自己需求在package.json 中进行调整

npmpnpmYarnBun

bash

npm run dev

bash

pnpm run dev # or pnpm dev

yarn dev

bash

bun run dev

build 脚本将构建应用，并生成一个或多个平台包。使用以下命令运行它：

默认构建微信小程序,根据自己需求在package.json 中进行调整

npmpnpmYarnBun

bash

npm run build

bash

pnpm run build # or pnpm build

bash

yarn build

bash

bun run build

快速开始 ​

前置准备 ​

Vscode插件安装 ​

创建一个Snail-uni项目 ​

方式一 ​

方式二 ​

启动并运行 ​

快速开始

前置准备

Vscode插件安装

创建一个Snail-uni项目

方式一

方式二

启动并运行