【亲测免费】 Qwerty Learner 开源项目搭建与配置指南

一、项目的目录结构及介绍

Qwerty Learner 是一款专注于英文单词记忆与键盘肌肉记忆训练的应用程序，专为使用键盘工作的人员设计。下面我们将详细介绍项目的目录结构：

• src: 主要的源码目录。
  • assets: 存放应用的静态资源如图片或字体文件。
  • components: 包含所有可复用UI组件的源文件。
  • pages: 应用各页面的具体实现文件。
  • utils: 实用工具函数集合，例如网络请求、字符串处理等功能。
  • store: 状态管理相关代码存放位置，用于存储全局状态。
• public: 静态资源文件夹，包括HTML模板文件和其它非编译资源。
• .gitignore: Git忽略规则，防止某些不必要的文件被纳入版本控制。
• package.json: NPM包配置文件，定义项目依赖和脚本命令。
• tsconfig.json: TypeScript 编译器配置文件。
• vite.config.js: Vite 构建工具的配置文件。

二、项目的启动文件介绍

启动文件通常指的是用来初始化并启动应用的文件，在Qwerty Learner中，这个角色由package.json中的脚本命令承担：

• yarn start: 运行此命令将启动本地开发服务器，默认端口为http://localhost:5173/，可以在此网页查看实时效果。

三、项目的配置文件介绍

.gitignore

• 作用: 指示Git哪些文件不需要追踪版本变化，比如编译后的文件、日志文件、临时文件等。

• 示例内容:

  # Compiled output
  dist/
  build/
  
  # Logs
  logs/
  
  # Editor directories and files
  .*\.swp$
  .*/.DS_Store
  .idea/
  
  # Yarn
  yarn.lock
  

package.json

• 作用: JavaScript/NPM项目的元数据配置文件，描述项目的名称、版本、作者、依赖项及其版本范围等。

• 关键字段解释:

    {
      "name": "qwerty-learner",
      "version": "版本号", // 当前版本标识
      "scripts": { // 执行命令的配置
        "start": "vite"
      },
      "dependencies": { // 生产环境依赖
         ...
      },
      "devDependencies": { // 开发环境依赖
         ...
      }
    }
  

tsconfig.json

• 作用: TypeScript项目的配置文件，用于指定TypeScript编译器如何编译你的代码。

• 核心属性说明:

    {
      "compilerOptions": {
        "target": "ESNext", // 指定目标JavaScript版本
        "module": "Node16", // 模块系统类型
        "jsx": "react-jsx" // React语法支持
        // 其它编译选项...
      }
    }
  

以上便是Qwerty Learner项目的基本搭建与配置流程概览，通过理解这些文件的作用与意义，你可以更高效地运用该框架进行开发和调试。