开发环境配置|Graphql专题 | 前端进阶之旅

# 环境准备

操作系统：支持 macOS，Linux，Windows
运行环境：建议选择 LTS 版本，最低要求 8.x。

# 初始化

# 使用脚手架生成 Egg 项目

推荐直接使用脚手架，只需几条简单指令，即可快速生成项目（npm >=6.1.0）:

$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm i

@前端进阶之旅: 代码已经复制到剪贴板

上面这种方式是 egg.js 官方推荐的创建简易项目，而我们本小册使用 Typescript 开发，所以我们换种方式：

TypeScript 初始化方式

$ npm init egg --type=ts
$ npm i

@前端进阶之旅: 代码已经复制到剪贴板

# 目录结构

egg-example

    |-- .autod.conf.js
    |-- .gitignore
    |-- .travis.yml
    |-- README.md
    |-- appveyor.yml
    |-- package-lock.json
    |-- package.json
    |-- tsconfig.json			# 指定了用来编译这个项目的根文件和编译选项
    |-- tslint.json				# 代码检查
    |-- app
    |   |-- router.ts			# 用于配置 URL 路由规则
    |   |-- controller			# 用于解析用户的输入，处理后返回相应的结果
    |   |   |-- home.ts
    |   |-- public				# 用于放置静态资源
    |   |-- service				# 用于编写业务逻辑层
    |       |-- Test.ts
    |-- config					# 用于编写配置文件
    |   |-- config.default.ts
    |   |-- config.local.ts
    |   |-- config.prod.ts
    |   |-- plugin.ts			# 用于配置需要加载的插件
    |-- test					# 用于单元测试
    |   |-- app
    |       |-- controller
    |       |   |-- home.test.ts
    |       |-- service
    |           |-- Test.test.ts
    |-- typings					# 目录用于放置 d.ts 文件
        |-- index.d.ts

@前端进阶之旅: 代码已经复制到剪贴板

gg API 项目中，一般都会包括这些功能项：路由文件、控制器目录、逻辑层目录。这些都在上述的代码结构中有列出，这是典型的 MVC 架构。新加功能时将代码放入对应功能的目录/文件中，可以使整个项目代码结构更加清晰，非常有利于后期的查找和维护。

# MVC

MVC 全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

# 安装插件

插件机制是Egg框架的一大特色，形成了egg 的繁荣的生态圈，接下来我们就来安装我们本次项目的第一个插件。

由于我们后续的实战是基于 TypeScript 的，所以在这里我选择了一个支持 TypeScript 的包 @switchdog/egg-graphql 。

$ npm i --save @switchdog/egg-graphql

@前端进阶之旅: 代码已经复制到剪贴板

# 开启插件

在 config/plugin.ts 下告诉 egg 开启哪些插件：