Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台，介绍及安装配置详细教程（2）前端商城页面

梦里梦外; 2023-07-04 14:15 25阅读 0赞

*本文由 PurePeace 原创*

*  **Saleor系列教程之1、saleor介绍及后端GraphQL服务安装配置**：  
    Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台，介绍及安装配置详细教程（1）后端 GraphQL api 示例数据 管理员账号：[https://blog.csdn.net/qq\_26373925/article/details/104265313][https_blog.csdn.net_qq_26373925_article_details_104265313]
 *  **Saleor系列教程之2、saleor前端安装配置教程**：  
    Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台，介绍及安装配置详细教程（2）前端 商城页面：[https://blog.csdn.net/qq\_26373925/article/details/104270046][https_blog.csdn.net_qq_26373925_article_details_104270046]
 *  **Saleor系列教程之3、saleor Dashboard安装配置教程**：  
    Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台，介绍及安装配置详细教程（3）Dashboard 管理后台：[https://blog.csdn.net/qq\_26373925/article/details/104271600][https_blog.csdn.net_qq_26373925_article_details_104271600]

--------------------

*上一篇教程（1）主要介绍了saleor后端GraphQL api服务的安装配置，*

*  *地址在这：[https://blog.csdn.net/qq\_26373925/article/details/104265313][https_blog.csdn.net_qq_26373925_article_details_104265313]*

--------------------

现在，我们来安装**saleor**的前端

**github**：[https://github.com/mirumee/saleor-storefront][https_github.com_mirumee_saleor-storefront]  
**demo**：[https://pwa.saleor.io/][https_pwa.saleor.io]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MzczOTI1_size_16_color_FFFFFF_t_70]

--------------------

# 准备 #

*  **1、Node.js 10及以上版本的环境**
 *  **2、成功配置并启动了saleor的GraphQL后端服务**（详见上一篇教程）

当你能够正常访问 [http://localhost:8000/graphql/][http_localhost_8000_graphql]时，即是满足了条件

# 开始 #

--------------------

## 1、克隆 ##

*  找一个目录，在其中打开命令行（cmd / powershell）运行以下命令
 *  git命令需要安装git

git clone https://github.com/mirumee/saleor-storefront.git

*  目前直接克隆到的默认是**Next**版本，可以在克隆完成后进入项目目录，输入 `git checkout master` 确认版本

进入前端项目目录

cd saleor-storefront

--------------------

## 2、安装依赖 ##

*  在项目目录下打开命令行，执行安装依赖

npm i

等待片刻即可

--------------------

## 3、启动前端 ##

*  启动前端之前，打开 `package.json` 找到第161行左右
 *  这是启动命令，我们为它的内容增加 `API_URI` 参数

*增加前*

"start": "cross-env NODE_ENV=develop webpack-dev-server --history-api-fallback --watch --port 3000 --mode development --hotOnly",

*增加后*

"start": "cross-env NODE_ENV=develop API_URI=http://127.0.0.1:8000/graphql/ webpack-dev-server --history-api-fallback --watch --port 3000 --mode development --hotOnly",

*  使用本地运行GraphQL的api服务：`API_URI=http://127.0.0.1:8000/graphql/`
 *  使用saleor的演示api：`API_URI=https://pwa.demo.saleor.rocks/graphql/`

然后就可以运行前端了！

npm start

*  前端的默认地址是 [http://localhost:3000][http_localhost_3000]，打开看看效果吧
 *  如果api接口没有数据就不会显示商品了，添加数据请看教程（1）
 *  `npm start` 之后**需要等待几十秒**左右的时间后才能显示出页面（正在编译）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MzczOTI1_size_16_color_FFFFFF_t_70 1]

--------------------

至此，saleor前端安装运行成功，接下来继续安装dashboard吧，步骤基本相同。

*  **系列教程之1、saleor介绍及后端GraphQL服务安装配置**：  
    Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台，介绍及安装配置详细教程（1）后端 GraphQL api 示例数据 管理员账号：[https://blog.csdn.net/qq\_26373925/article/details/104265313][https_blog.csdn.net_qq_26373925_article_details_104265313]
 *  **系列教程之2、saleor前端安装配置教程**：  
    Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台，介绍及安装配置详细教程（2）前端 商城页面：[https://blog.csdn.net/qq\_26373925/article/details/104270046][https_blog.csdn.net_qq_26373925_article_details_104270046]
 *  **系列教程之3、saleor Dashboard安装配置教程**：  
    Saleor：基于Python、Django、GraphQL、React.js的开源免费无头电子商务平台，介绍及安装配置详细教程（3）Dashboard 管理后台：[https://blog.csdn.net/qq\_26373925/article/details/104271600][https_blog.csdn.net_qq_26373925_article_details_104271600]

--------------------

2020年2月11日 PurePeace

[https_blog.csdn.net_qq_26373925_article_details_104265313]: https://blog.csdn.net/qq_26373925/article/details/104265313
[https_blog.csdn.net_qq_26373925_article_details_104270046]: https://blog.csdn.net/qq_26373925/article/details/104270046
[https_blog.csdn.net_qq_26373925_article_details_104271600]: https://blog.csdn.net/qq_26373925/article/details/104271600
[https_github.com_mirumee_saleor-storefront]: https://github.com/mirumee/saleor-storefront
[https_pwa.saleor.io]: https://pwa.saleor.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MzczOTI1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200211211708546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MzczOTI1,size_16,color_FFFFFF,t_70
[http_localhost_8000_graphql]: http://localhost:8000/graphql/
[http_localhost_3000]: http://localhost:3000
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MzczOTI1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200211215346417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MzczOTI1,size_16,color_FFFFFF,t_70