零、准备

部署 API 接口服务

  1. 将接口服务项目下载到本地
  1. git clone https://github.com/lipengzhou/shop-api.git

  1. 创建一个数据库命名为 shop

  2. 将 shop-api/shop.sql 导入 shop 数据库中

  3. 将 shop-api/config/default.json 文件中的数据库连接信息 db_config 修改为自己的

  4. 安装第三方包并启动 API 服务

  1. cd shop-api
  2. npm install
  3. npm start

执行完 npm start 命令之后，如果看到如下提示信息则说明部署成功。

零、准备 - 图1

::: tip 以后每次开发的时候一定记得 npm start 把接口服务启动起来。 :::

部署预览完整版客户端

  1. git clone https://gitee.com/lipengzhou/shop-admin-dist.git
  2. cd shop-amdin-dist
  4. # 或者 npm install
  5. yarn install
  7. # 或者 npm start
  8. yarn start

执行完 yarn start 命令之后会看到如下提示：

零、准备 - 图2

::: tip 执行 yarn start 命令之后默认开启的服务占用的端口号是 8080，如果 8080 被占用，则会 +1 依次向后使用，例如 8081、8082、8083…，以终端提示为准。 :::

打开浏览器访问终端中给出的服务地址。

API 接口文档

http://shop-api.circle.ink/

Postman 接口测试工具

Yarn

Yarn 是 Facebook 工程师开发的一个类似于 npm 的包管理工具。相比 npm ，Yarn 号称具有更好的功能特性。

  • 快速
    • 并行下载
    • Yarn 会缓存它下载的每个包，所以无需重复下载
  • 可靠
    • Yarn会在每个安装包被执行前校验其完整性。
  • 安全
    • Yarn 使用格式详尽而又简洁的 lockfile文件 和确定性算法来安装依赖，能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上。

下载及安装：

https://yarnpkg.com/zh-Hans/docs/install

像使用 npm 一样来使用 yarn：

  1. # npm init
  2. yarn init
  4. # npm init -y
  5. yarn init -y
  7. # npm install 包名
  8. yarn add 包名
  10. # npm install 包名@版本号
  11. yarn add 包名@版本号
  13. # npm uninstall 包名
  14. yarn remove 包名
  16. # npm install
  17. yarn install 或者 yarn
  19. # npm install --global 包名
  20. yarn global add 包名
  22. # npm uninstall --global 包名
  23. yarn global remove 包名

::: tip 使用 yarn 管理第三方包会在项目目录中生成一个 yarn.lock，它的作用类似于 package-lock.json :::

::: warning 建议在项目中只使用一种包管理工具，或者 npm 或者 yarn，不要两者混合使用，否则会导致包的混乱及重复安装反而降低了效率。 :::