快速上手

本页只做一件事：用官方脚手架把第一个 Viewfly 应用跑起来。

快速体验

如果你已经完成安装与配置，下面照着执行就能看到第一个页面。

创建一个 Viewfly 应用

使用脚手架

@viewfly/cli 会在当前目录下新建工程并写入模板。下面是一次性执行（无需全局安装）的写法：

npmpnpmyarnbun

bash

npx @viewfly/cli create my-app

bash

pnpm dlx @viewfly/cli create my-app

bash

yarn dlx @viewfly/cli create my-app

bash

bun x @viewfly/cli create my-app

如果你没有通过命令行传入选项，向导会依次询问模板、可选特性、包管理器和是否自动安装依赖；不确定时直接回车使用默认值即可。

bash

npx @viewfly/cli create my-app \
  --template vite \
  --features router,scoped-css \
  --pm pnpm \
  --install

创建完成后进入项目目录。若创建时没有自动安装依赖，就先安装再启动开发服务器：

npmpnpmyarnbun

bash

cd my-app
npm install
npm run dev

bash

cd my-app
pnpm install
pnpm dev

bash

cd my-app
yarn
yarn dev

bash

cd my-app
bun install
bun run dev

终端会打印本地预览地址（通常是 http://localhost:5173）；在浏览器打开它，就能看到应用页面。

生产构建

npmpnpmyarnbun

bash

npm run build

bash

pnpm build

bash

yarn build

bash

bun run build

产物通常在 dist/，由 Vite 生成。部署方式取决于你的静态资源托管或后端方案，不在本页展开。

小提示

入口长什么样

脚手架生成的 src/main.tsx 会与下面类似（具体以模板为准）：用 createApp 挂载根组件到 index.html 中的容器节点。

tsx

import { createApp } from '@viewfly/platform-browser'
import { App } from './app'

createApp(<App />).mount(document.getElementById('app')!)

应用入口通过 createApp 把根组件挂到 #app；你可以在创建应用里继续看完整生命周期和常见用法。

快速上手 ​