shopify 前端教程（还在学可能有很多错误理解以及知识点）

第一步：本地开发环境的搭建

①第一步是安装ruby+gem，以下是官网的链接：Downloads (rubyinstaller)

友情提示：官网下载速度非常慢，我不会翻墙，我是在csdn搜索别人下载好的安装。

Windows下安装 ruby_Xahoo！的博客-CSDN博客_windows安装ruby

请参考这位博主。

安装完成后会自带一个gem包管理工具，类似npm吧，然后我们需要检查安装的成功没有：

输入 ruby -v   和 gem -v 进行查询，安装成功会返回版本号。

②通过安装gem去安装shopify脚手架工具：

gem install shopfiy-cli    安装成功后需要通过输入  shopify version 来查看是否安装成功，过程比较久请耐心等待就好了。

③接下来我将介绍常用的shopify指令：

首先，我们通过shopify login --store <商店的url> 登录到shopify商店，然后登录成功会显示

Authenticated successfully. You may now close this page.

如果未显示，可以通过 shopify whoami 进行查看是否登录成功，如果之前已经登录过了，需要通过shopify logout 退出当前账号。登录成功后，我们先创建一个文件夹，并且在文件夹目录处输入cmd指令打开命令指示行，然后我们可以通过shopify theme pull 然后选择需要拉取的模板即可， 这时候我们就可以看到代码了，可以将其放进vscode等软件进行代码编写，通过运行shopify theme serve 可以开启本地服务，开启完成后，你在vscode中进行代码修改就能够通过cmd命令中的url进行查看修改效果了。如此，便完成本地开发环境的配置。

二、shopify目录结构

首先我推荐观看这位博主，博主写的非常清晰非常好，入门完全可以看得懂，我再加上我的一下简单理解介绍给大家。

(2条消息) shopify的前端开发教程_climsi的博客-CSDN博客_shopify前端

①作为前端开发人员，初期我们需要了解与页面相关，据我所知，shopify是前后端不分离项目（听说，不一定靠谱），首先我们要了解assets目录下的style.css.liquild这里面包含了大部分shopify页面相关的样式，除了部分写在section里面的，基本都在这里了，还需要我们了解的是theme.js文件，他说页面的入口文件，会有一些结构和样式可能在这里初始化，config里面主要存有和数据相关的配置，可以先不做了解，sections里面是我们前端主要需要了解的地方，可以理解成页面部分，sections里面的每一个section都相当于一个页面一样，在编辑者模式下，左侧的一个个文件就是有sections里面的section构成的，可以通过拖拉对页面结构进行修改。这里有一个比较需要注意区分的点，snippets的概念有点像我们学习vue中的compents，如果需要用到只需要将参数传进去就可以实现对他的使用了，其实可以理解成一个个代码小片段，某些重复部分很高或者高复用的地方就可以写成snippets可以大大减少代码量。

②通过①链接博主的文章其实对shopify的目录结构已经有了一定理解，接下里就是比较重点的，前置知识掌握，首先必须要会html、css以及js这些基础，据说theme.js里面可能会有一些jQuery相关代码，如果是开发前可以先做了解，第二个是比较重要的liquid的学习，据我所知，他是shopify使用的一门模板语言，想要看懂shopify代码必须先去了解，目前我也没有较好的文档网址，我所看的中文文档内容非常少：

Liquid 模板语言中文文档 | Liquid 中文网 (bootcss)

这里也给到大家，还有一个文档是我的一个大佬给我的Shopify 开发手册 | 豪翔天下 (haofly)这份开发手册内容其实也不难懂，不过具体应用现在我无法教给大家，因为我也一知半解，目前我还处于非常初期阶段，如果有不懂的可以一起交流。

新增：

今天对presets有了新的认识，原来presets的name就是在添加分区处显示的name,在你添加一个新的模板如果你需要一些默认的配置，可以在这里进行配置，比如加入的类型是图片类型等等，只有配置了presets的才能够在添加分区显示，name就是你搜索的内容。

 

Tips：最后：由于本人处于非常初期的学习阶段，为可能刚学的同学提供一些帮助，同时也非常欢迎大佬指出错误，毕竟其实还很多不懂，怕误导大家，由于shopify资料实在太少了，我也没有什么好的分享，如果朋友们有也请分享，非常感谢，如果多点大佬发文章就好了，感觉学习过程中还是有很多不明白的地方。