上传题目模块
上传题目模块功能可以允许你将 Vue 题目 的全部内容放在一个 .vue 文件中并上传它。从而获得与编辑器内使用 “VUE SFC” 模式相同的功能。
说明
由于允许你在本地开发 Vue 题目模块，还会获得很多额外的优势：
- 使用标准的 Vue 单文件组件语法开发。
- 通过 Vite 编译为目标代码，因此你可以使用最新的 Javascript 语法，例如
import，而这并不支持在网页编辑器中使用。 - 通过本地 DevServer 实现实时预览。你可以一边编写代码一边实时查看最终效果。
- 允许引入第三方库。
文件格式
待上传的题目模块必须是 .vue 为扩展名的 Vue SFC 文件。文件中必须有 <template>、<style> 和 <script> 部分，各个部分的要求和 Vue 题目 相同。
使用模板开发
我们并不建议你手工在本地编辑器中编写以上三部分并上传。那样的开发体验甚至弱于网页编辑器。
请使用 ccxc-engine-puzzle-template CCXC 引擎谜题模板进行开发。
初始化模板项目
执行以下的命令来初始化模板项目：
npx degit cipherpuzzles/ccxc-engine-puzzle-template your-project-name
cd your-project-name
npm install开发前准备
你需要先编辑 .env.development 和 .env.production。将其中的变量 VITE_BACKEND_ROOT 指向项目后端访问的路径。
启动 Dev Server 开发服务器
npm run dev注意
谜题模板也使用和其他前端组件相同的 mkcert 用于生成本地开发证书。
开发谜题
在 src/puzzles 目录下有许多 .vue 文件。每个文件是一个独立的谜题。
在模板项目中，已经有一些示例的谜题文件，可以参考这些文件的写法进行开发。
使用第三方库
在示例谜题中，CanvasPuzzle 和 ChartPuzzle 都引入了第三方库。
要引入第三方库很简单，你只需要使用：
npm install <第三方库> --save并在 .vue 文件中通过 import 引入即可。被引入的第三方库将会被打包进最终文件中。
说明
由于 Vite 有原生的 Tree Shaking 功能，对于一些很大的库，使用 import 导入部分功能，最终生成的文件只会包含导入部分的代码。
并且不会打包进没有引用这些第三方库的题目中。
所以你可以放心的安装和使用大型的第三方库。
构建谜题
和常见的前端项目一样，你只需使用：
npm run build即可启动构建。
这会将 src/puzzles 目录下的每一个 .vue 文件都编译成一个独立的文件，并输出到 dist/puzzles 目录。
打开 dist/puzzles 目录找到相同文件名的文件，即是最终的谜题文件。
上传编译好的题目
在“题目管理”中，新建或编辑题目。将“内容类型”选择为“上传题目模块”后，你会看到“上传题目模块”按钮。
点击此按钮，并选择 dist/puzzles 目录中编译出的谜题文件即可。
特别说明
编译出的文件和直接在编辑器里填写的 Vue 题目格式是一致的。
所以你其实可以打开编译出来的文件，并将 <template> 和 <style> 部分复制到“题目HTML”中。将 <script> 部分（不含 <script> 标签）复制到“题目代码”中。
除了这些代码不可读以外，实际效果是一样的。
预览模板
在 src 目录下的其他代码，例如 App.vue、main.js 和 previewComponents 目录，实现了谜题的预览功能。
在执行 npm run dev 后，打开的服务器就是预览模板。
注意
要使用预览模板的所有功能（尤其是“调用后台题目脚本”或是“实时协作”），你必须点击右上角登录。然后通过 SSO 登录完成用户身份认证。为了让这个认证过程能在本地完成，你必须使用带有测试域名的开发服务器。例如：test.ccxc.ikp.yt。同时，你需要修改 ccxc-backend 的 SSO 登录流程，放行你自己的测试域名。