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

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

①第一步是安装ruby+gem,以下是官网的链接:Downloads (rubyinstaller.org)

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

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

请参考这位博主。

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

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

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

gem install shopify-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.com)

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

新增:

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

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

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值