SEECBC/FrontEnd

final-project

My dandy Nuxt.js project

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

Doker

docker pull bbida/seec-dl
docker run --rm -it --name containerName -p 3000:5000 bbida/seec-dl

然后直接在 localhost:3000 进行访问即可

todo

• 进行设置使其能与后端进行交互

开发指南

使用的库

• Vuetify
• nuxt-i18n
• nuxt
• d3

编写 Playground 组件

1. 在 components/playground 中创建文件夹编写一个 Playground 的相关组件

2. 在 pages/learning/_chapter/_level/playground.vue 中将组件进行注册，注册的方式如下

   const playgroundComponents = {
     'math/function': () => import('~/components/playground/nn/Simulation.vue')
     // 新的 Playground 组件添加在此处
   } as { [key: string]: Object }

其中 math/function 是 route 的参数，分别对应 :chapter/:level（添加新的 Chapter 或 Level 的方法在后面）

添加新的 Chapter 和 Level

1. 在 docs 中创建新的文件夹，且文件的名称为 chapter 的名称。

2. 在 data/chapter.ts 中的 chapter 变量中添加相应信息

   const chapters: Chapter[] = [
     { name: 'learning.chapter.math.title', description: 'learning.chapter.math.description', chapterNum: 1, to: 'learning/math' },
     { name: 'learning.chapter.tf.title', description: 'learning.chapter.tf.description', chapterNum: 2, to: 'learning/tf' }
   ]

• name 和 description 由于都使用了 nuxt-i18n ，所以需在 locales/zh-CN.json 中添加对应的中文
• chapterNum: 章节 id，在不重复的前提下随便取
• to: 路由，格式为 learning/${chapterName}，其中 chapterName 应与创建的 chapter 文件夹名称一致

1. 在刚刚创建的 chapter 文件夹下创建 ${levelName}.md 文件作为该关卡的教程，如 docs/math/function.md 即为 math 章节的 function 关卡的教程文本

2. 在新创建的 chapter 文件夹中创建 meta.json 文件，用于描述该章节的关卡信息，格式如下

   [
     { "levelNum": "Math-1", "name": "learning.chapter.math.level.function", "to": "/learning/math/function" },
     { "levelNum": "Math-2", "name": "learning.chapter.math.level.vector", "to": "/learning/math/vector" }
   ]

• levelNum: 当前关卡的 ID（自定义，可随意取）

• name: 当前关卡的名称

  • name 的格式为 learning.chapter.${chapterName}.level.${levelName}，levelName 与 chapterName 最好与路由中的参数 chapter 和 level 一致

  • 此处由于使用了 nuxt-i18n 所以 name 只是一串代号，最终显示的名称应在 locales/zh-CN.json 中进行注册，如 learning.chapter.math.level.function 应注册为

     "learning": {
         "chapter": {
           "math": {
             "description": "本章梳理了神经网络所需的数学知识，包括微积分、矩阵等内容",
             "level": {
               "function": "神经网络所需的函数",
             }
           }
         }
     }
  

  • to: 路由。注意 chapter 与 level 要分别和 chapter 文件夹的名称以及教程文本的名称一致。如 /learning/math/function 中的 math 有 docs/math 这一文件夹与之对应， function 有 docs/math/function.md 与之对应。