1. Toy模板网首页
  2. > Toy博客

商品首页(sass+git本地初始化)

9月前 作者：日进斗识 分类：Toy博客 阅读(51) 违法举报

这篇具有很好参考价值的文章主要介绍了商品首页(sass+git本地初始化)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

安装sass/sass-loader

首页(vue-setup)

使用git本地提交

同步远程git库文章来源地址https://www.toymoban.com/news/detail-646659.html

  1. 安装sass/sass-loader

    1. #安装sass
npm i sass -D

#安装sass-loader
npm i sass-loader@10.1.1 -D

  2. 首页(vue-setup)

    1. <template>
	<view class="u-wrap">
		<!-- 轮播图 -->
		<swiper class="wiper-contain" circular :indicator-color="indicatorColor" :indicator-dots="indicatorDots"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item,index) in swiperList">
				<image class="imgs" :src="item.image"></image>
			</swiper-item>
		</swiper>
		<!-- 搜索框 -->
		<view class="tab-strickt">
			<u-search style="flex-grow: 1;margin-top: 10px;" bg-color="#FFF" :show-action="true" action-text="搜索" :animation="true"></u-search>
		</view>
		<!-- 瀑布流 -->
		<u-waterfall v-model="flowList" ref="uWaterfall1">
			<template v-slot:left="{leftList}">
				<view class="demo-warter-left" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{{item.shop}}
					</view>
					<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
						@click="remove(item.id)"></u-icon>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter-right" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{{item.shop}}
					</view>
					<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
						@click="remove(item.id)"></u-icon>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const indicatorDots = ref(true)
	const autoplay = ref(true)
	const interval = ref(5000)
	const duration = ref(2000)
	const indicatorColor = ref("#FFF")
	//轮播图
	const swiperList = ref([{
			image: '/static/home/swiper/1.jpg',
			title: '昨夜星辰昨夜风，画楼西畔桂堂东'
		},
		{
			image: '/static/home/swiper/2.jpg',
			title: '身无彩凤双飞翼，心有灵犀一点通'
		},
		{
			image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
			title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
		}
	])
	//瀑布流
	const flowList = ref([{
			price: 35,
			title: '北国风光，千里冰封，万里雪飘',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
		},
		{
			price: 75,
			title: '望长城内外，惟余莽莽',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
		},
		{
			price: 385,
			title: '大河上下，顿失滔滔',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
		},
		{
			price: 784,
			title: '欲与天公试比高',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
		},
		{
			price: 7891,
			title: '须晴日，看红装素裹，分外妖娆',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
		},
		{
			price: 2341,
			shop: '李白杜甫白居易旗舰店',
			title: '江山如此多娇，引无数英雄竞折腰',
			image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
		},
		{
			price: 661,
			shop: '李白杜甫白居易旗舰店',
			title: '惜秦皇汉武，略输文采',
			image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
		},
		{
			price: 1654,
			title: '唐宗宋祖，稍逊风骚',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		},
		{
			price: 1678,
			title: '一代天骄，成吉思汗',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		},
		{
			price: 924,
			title: '只识弯弓射大雕',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		},
		{
			price: 8243,
			title: '俱往矣，数风流人物，还看今朝',
			shop: '李白杜甫白居易旗舰店',
			image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
		}
	])
</script>

<style lang="scss">
	.wiper-contain {
		height: 180px;

		.item {
			height: 180px;
		}

		.imgs {
			height: 180px;
			width: 100%;
		}
	}

	.tab-strickt {
		position: sticky;
		z-index: 99;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		background-color: #f2f2f2;
	}

	.demo-warter-left {
		border-radius: 8px;
		margin: 5px 0px 5px 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.demo-warter-right {
		border-radius: 8px;
		margin: 5px 5px 0px 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>

  3. 使用git本地提交

    1. #创建的vue项目
cd shop-wx

#初始化git
git init

#添加文件到暂存区
git add .

#本地提交
git commit -m "init shop-wx"

  4. 同步远程git库

    1. https://gitee.com/cloud2023_1/shop-wx.git
    2. #同步代码到远程库
git remote add origin https://gitee.com/cloud2023_1/shop-wx.git


#将提交的代码同步到主分支
git push -u origin master

到了这里，关于商品首页(sass+git本地初始化)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【uniapp】小程序开发，初始化项目vscode

    【uniapp】小程序开发，初始化项目vscode

    使用uniapp开发小程序可以实现一份代码打包成多个不同平台的小程序。 这里使用uniapp官方的项目模板作为示例，采用vue3+ts开发，并使用vscode作为开发工具 1、通过以下命令创建模板项目 参考 官方说明 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模

    2024年02月09日
    浏览(56)
  • Git初始化

    Git初始化

    方法： 修改全局文件（用户主目录下.gitconfig） 修改系统文件（如/etc/gitconfig） 用户姓名和邮件地址 修改用户名和邮件地址 清空用户姓名和邮件地址 查看用户名和邮件地址 git config -e 对应于 版本库级别的配置文件（workplace/demo/.git/config） git config -e --global 对应于 全局配置文

    2024年02月14日
    浏览(43)

  • git初始化项目上传

    步骤1：创建远程仓库 平台上建好项目，并copy远程仓库的URL 步骤2：初始化本地Git 首先，进入您本地的项目根目录下，然后，打开命令行界面，导航到该目录并执行以下命令： 执行完之后我们可以看到根目录下会多出一个.git文件。 如果是java项目可以在这个项目根目录下加个

    2024年02月10日
    浏览(58)

  • git 初始化的一些操作

    git init  初始化git文件 确认远程仓库 URL： 使用以下命令检查远程仓库的 URL： git remote -v 确保 origin 远程仓库的 URL 是正确的。 设置远程仓库 URL： 如果 URL 不正确，可以使用以下命令更改远程仓库的 URL： git remote add origin ssh://git@192.xxxxxxx/vrboxwit_standard.git git remote set-url origin

    2024年01月20日
    浏览(39)

  • 初始化git仓库(已存在项目)

    1.创建git仓库，获取仓库git地址 2.进入已存在项目根目录，打开git bash，执行命令，初始化仓库 3.添加文件 4.配置gitignore文件，排除部分文件 5.提交到本地 6.配置远端仓库 7.push到远程仓库某分支，完成代码上传

    2024年02月11日
    浏览(56)

  • Git初始化连接Gitlab远程仓库

    ​ 新环境下git配置，除了初始化和name、email设置，还需在远程仓库Gitlab中配置个人ssh key，才能clone远程仓库代码到本地，完成关联。 此时，.ssh目录下会有一个公钥(id_rsa.pub)一个私钥(id_rsa)，将公钥的内容放到GitHub/GitLab等用户设置的SSH keys中即可。 之后本地就关联了远程仓库

    2024年02月11日
    浏览(58)
  • Git的安装与初始化配置教程

    Git的安装与初始化配置教程

    Git是一个版本控制系统。版本控制系统可以使多个终端同时在线对一个文件或者数据进行更改而不用每次更改时重复创建多余的副本，或者造成不必要的存储空间浪费。 版本控制系统有两种类型： 一种是集中式版本控制系统： 比如SVN、CVS等等。集中式版本控制系统中，所有

    2024年03月16日
    浏览(46)

  • Git第二讲 使用Git命令创建和初始化仓库

    在使用Git之前，您需要创建并初始化一个Git仓库。这个仓库将用于存储您的项目文件并跟踪其版本。 首先，让我们创建一个全新的Git仓库。请按照以下步骤进行操作： 打开命令行终端或Git Bash，并导航到您想要存储项目的目录。 运行以下命令来初始化一个新的Git仓库： 这将

    2024年02月11日
    浏览(39)

  • Git设置初始化默认分支为main

    github创建项目的默认分支为main。本地创建的git分支默认为master，每次在本地新建一个仓库再关联到remote，分支不统一。 git在2.28版本中提供了一个配置，指定在执行 git init 的时候生成的默认分支 本地git版本不够的话先升级； 如果使用homebrew安装的git，直接升级即可 或者可以

    2024年02月13日
    浏览(53)
  • git--克隆、初始化项目+taobao镜像源

    git--克隆、初始化项目+taobao镜像源

    目录 1.推送到已有仓库 2.删除原有项目git重新建立git方法 3.查看切换taobao镜像源 4.git报错、npm i 报错 1.BUG:git报错remote: Access denied 拒绝访问 fatal: unable to access ‘ https:/ /gitee. cohe requested URL 40 2.git 提交之后报错：无法推送refs到远端。您可以试着拉取，整合更改（不能有dist文件

    2024年04月29日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包