本系列文章将记录本人跟着慕课网实战课程一步一步搭建一个企业级协作平台的过程，所用Angular版本为6.0.3，MATErial版本为6.3.3。利用Angular CLI脚手架工具，版本为6.0.8。关于node和Angular cli的安装过程，网上有很多资料，在此不再赘述。下面我将介绍一下本次使用IDE（VS Code）中一些好用的插件和json-server包。

• Debugger for Chrome:用于调试前端代码
• Angular 6 SnipPEts：包含了TS，HTML，material中的一些快捷模板
• Chrome插件-Augury：可以清楚的看到angular项目的目录结构和依赖注入的关系，需翻墙

实战项目只是涉及到前端，没有后端接口，而json-server可帮助我们快速搭建REST API。

安装

npm install -g json-server

使用

json-server ./mock/data.json

mock目录与项目的src目录平级，data.json内容如下

 {
   "PRojects": [
      {
        "id": "Sk2hatagb",
        "name": "问题跟踪系统",
        "desc": "用于 Bug 的内部跟踪和管理",
        "coverimg": "/assets/img/covers/1.jpg",
        "members": [
          "37489e0c-DF34-c261-71c4-ce75357e3035",
          "BkkDvwee-"
        ]
      },
      {
        "name": "某某公司 ERP 系统",
        "desc": "为某某公司开发的定制化 ERP 系统",
        "coverImg": "/assets/img/covers/20.jpg",
        "members": [
          "37489e0c-df34-c261-71c4-ce75357e3035"
        ],
        "id": "Hya1moGb-",
        "taskLists": [
          "BylTyXiM-b",
          "BkWpk7jGZb",
          "h1fTyXjMWW"
        ]
      }
    ],
}

执行成功后访问localhost:3000就可以看到data.json中的内容了。接下来可以用postman测试接口，接口地址为：localhost:3000/projects。对于新增操作，json-server会自动生成id，而且对于增删改的操作，都会改变data.json中的内容，比较接近于真实的开发环境。至此，项目的基本准备工作就完成了。