代码拉取完成，页面将自动刷新
一个 Vue3 SFC 沙盒。https://github.com/Sight-wcg/sandbox-vue
// 下载
git clone https://gitee.com/layui-vue/layui-vue-playground.git
// 安装依赖
pnpm install
// 运行
pnpm dev
1. 配置基本信息和组件库依赖 src/config/sandbox.config.js
// 基本信息
export const config = {
// 网站 title
title: 'sandbox-vue',
// UI 库包名
UIPackage: '@layui/layui-vue',
// 版本选择框显示的最小版本
minSupportedVersion: '0.2.5',
// 是否过滤预发布版本
filterPreRelease: false,
// APP.vue 内容模板
defaultAppTemplate: defaultAppTemplate.trim()
}
// 依赖源
export interface DependencySource {
// 依赖源名称
name: string;
// 依赖源链接
url: string;
}
// 依赖
export interface Dependency {
// 包名
name: string;
// 描述
description?: string;
// 版本
version?: string;
// 路径
path: string;
// 样式路径
stylePath?: string;
// 依赖源
source?: DependencySource["name"];
}
2. APP.vue 模板 /src/config/defaultAppTemplate.vue
<script setup lang="ts">
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
</template>
下载功能需要自行修改 /src/download/template/** 下的模板文件
运行 pnpm build 命令来执行应用的构建，默认情况下，构建会输出到 dist 文件夹中
pnpm build
构建完成应用后，通过运行 pnpm preview 命令，在本地测试该应用。
pnpm build
pnpm preview
在 vite.config.js中设置正确的 base。
如果要部署在 https://<USERNAME>.github.io/ 上，可以省略 base 使其默认为 '/'。
如果要部署在 https://<USERNAME>.github.io/<REPO>/ 上，例如仓库地址为 https://github.com/<USERNAME>/<REPO>，那么需要设置 base 为 '/<REPO>/'。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手