开始

开发环境

使用本套件前，需要在本地依次安装好 Node.js, pnpm, Git 和 Visual Studio Code。

注意

在 package.json 文件中有限制 node 要求版本，建议使用最新 LTS 版本。

然后在 Visual Studio Code 里安装好以下扩展：

在 Visual Studio Code 里打开源码的文件夹，右下角会自动提示需要安装的依赖，直接点击安装即可。

额外推荐

以上为开发时必备扩展，以下则是作者推荐安装的扩展，安装它们将在一定程度上提升开发效率。

Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包
Color Highlight 在代码中高亮颜色
Highlight Matching Tag 高亮显示匹配的标签
Image preview 图片预览
indent-rainbow 彩虹缩进提示

拉取代码

做好准备工作后，依次执行下面的命令：

bash

# 克隆项目（如果本地已有源码，可跳过这步）
# 可选择从 github 或 gitee 克隆 example 分支
git clone https://github.com/hooray/fantastic-startkit.git
# 或者
git clone https://gitee.com/hooray/fantastic-startkit.git

# 进入项目目录
cd fantastic-startkit

# 安装项目依赖
pnpm install

# 运行
pnpm run dev

运行成功后，会自动访问页面，默认情况下，地址为 http://localhost:5173

报错

安装依赖时提示 404 ，或者安装结束后，运行时提示「 'vite' 不是内部或外部命令，也不是可运行的程序或批处理文件」，都些都是依赖未安装成功导致的。可以尝试执行 pnpm config set registry https://registry.npmmirror.com/ 切换为国内 npmmirror 源（也可以使用 nrm 一键切换源），然后删除根目录下 /node_modules 文件夹并重新安装依赖。

项目结构

本项目采用 Monorepo 架构，基于 pnpm workspace 管理多个应用和公共包。

fantastic-startkit/
├── apps/              # 应用目录
│   ├── core           # 应用源码
│   └── example        # 示例应用
├── packages/          # 公共包目录
├── docs/              # 文档站点
├── scripts/           # 脚本工具
└── package.json       # 根目录 package.json

执行 pnpm dev 或 pnpm build 命令时，会通过交互式命令行提示选择要运行或构建的应用。

技术栈

了解并熟悉框架使用到的技术栈，能让你使用本框架更得心应手。

开始 ​

开发环境 ​

拉取代码 ​

项目结构 ​

技术栈 ​

开始

开发环境

拉取代码

项目结构

技术栈