（二）页面初始化及banner图片显示——vue-cli3实例：电商分类网页

最新推荐文章于 2024-05-27 14:24:02 发布
最新推荐文章于 2024-05-27 14:24:02 发布
阅读量231 收藏
点赞数
分类专栏： 封存 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40959369/article/details/106898756
版权

#将生成的项目拖入到HBuilderX

#public文件夹中加入图片

#src/views文件夹下创建前端页面的.vue文件

#router/index.js中添加相应的路由（import 、routes中添加）

#ctrl +L 保存

#（HBuilderX）HX 中该项目的终端下执行 npm run serve

#内容更改，修改成功

Java大饭桶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3封装轮播图组件
梅花寺
01-17 291
封装组件可以通过父子组件传值,插槽传值,实现数据传递整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
vue-cli-analysis：vue-cli原始码分析（vue-cli3）
01-30
慎重提醒：我对vue-cli的源码以及其中的一些知识点并不熟悉，如果我对其中的知识点非常了解的话我就不会来分析了，分析只是只是想更加了解vue-cli整个工具的实现过程以及vue-cli3的一些新特性。如果文中有描述有误，...
电商系统-项目初始化
06-11 139
配置软件。 1.数据库初始化 2.JDK 3.IDEA(Eclipse) 4.Maven(使用archetype创建一个本地web项目，并且发布。) 5.Tomcat 6.Git创建git仓库， git init初始化，变为一个git项目。（添加文件，commit到远程仓库，创建分...
vue3 3D炫酷模型banner图
最新发布
weixin_44565776的博客
05-27 315
可以从其它的网站中学习新的功能，让前端技能丰富起来。
npm组件 vue-scroll-ad 广告滚动
hpf_huang的博客
05-16 1221
前言 闲着没事，做了一个商场项目，然后发现商城项目中，有很多地方都要用到广告滚动的效果，就想着写个组件，这样以后也不用总是重复写一遍（复制一遍）。 第一次写组件，参考了好多文档，然后找到了一个大佬写的，非常详细，收了，打算写组件的可以看看：https://blog.csdn.net/qq_40513881/article/details/82494958 正文 先上效果图 基本一个项目里有单列的...
Vue3.0组件—banner轮播图（渐入渐隐效果）
前端菜鸟
09-19 4657
①组件图片切换有三种方式，第一种是图片两边按钮切换，第二种是点击图片下方小横条切换，第三种是自动切换；②子组件props的属性：listBanner（播放的图片源）、interval（图片播放的间隔时间）、 autoSwitc（是否自动播放banner）、 setHeight（banner的高度）；③给切换图片的标签添加ref，改变ref属性中的opacity，切换透明度，达到图片渐隐渐显的效果，再给对应标签样式中添加`transition-duration: 1.5（片透明度切换的时间）
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page ...
vue-cli3-template：基于Vue-cli3建造的脚手架项目模板
01-31
vw移动端适应文件结构可视化：webpack-bundle-analyzer安装及快速开始# 克隆项目$ git clone https://github.com/liangfengbo/vue-cli3-template# 进入目录$ cd vue-cli3-template# 安装依赖包$ yarn install# 启动...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
我们有很多现有的vue-cli（3.x / 4.x）项目。 在生产中：基于webpack的vue-cli仍然是捆绑webapp的最佳实践（通过代码拆分，旧版浏览器的旧版构建）。 在开发中：即时启动服务器并通过闪电快速实现HMR很有趣。 ...
vue-cli-plugins::electric_plug:适用于Vue CLI的Vuetify插件集合
04-27
vue-cli-plugin-vuetify-preset-basil 罗勒材料研究 vue-cli-plugin-vuetify-preset-crane 起重机材料研究 vue-cli-plugin-vuetify预置-每两周一次 每两周进行一次材料研究 vue-cli-plugin-vuetify预设猫头鹰 ...
vue3 封装轮播图组件 - 全局封装
web00_11的博客
09-14 391
vue3 项目封装轮播图组件
banner轮播图实现、激活状态显示和分类列表渲染、解决路由缓存问题、使用逻辑函数拆分业务（一级分类）【Vue3】
weixin_53943447的博客
07-20 430
一级分类的切换正好满足上面的条件，组件实例复用，
banner广告轮换显示代码
groupliu的专栏
04-06 760
function reapply(){setTimeout("slideit()",2000)return true}window.onerror=reapply//preload imagesvar image1=new Image()image1.src="bananer1.gif"var image2=new Image()image2.src="bananer2.gif"var ima
Vue3---封装一个轮播图组件
weixin_55690518的博客
09-14 1636
友友们，今天我们来使用Vue3封装一个轮播图组件 第一步：我们先来封装一个轮播图组件的通用组件： （1）轮播图组件的结构 carousel.vue <template> <div class='xtx-carousel'> <ul class="carousel-body"> // 放置图片 <li class="carousel-item fade"> <Ro...
基于vue双向绑定实现banner
With__Hope的博客
05-09 196
banner轮播图基于vue双向绑定实现bannerHTMLcss部分js代码 基于vue双向绑定实现banner HTML <div id="app"> <!-- <button @click="dayin">dayin</button>--> <div class="container" @mouseover="mouseOver" @mouseleave="mouseLeave"> <img :src="b
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
热门推荐
在写作的路上持续输出。
02-01 3万+
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
vue上传图片-banner上传（多张）
Sunshinedada的博客
12-23 847
vue上传图片-banner上传（多张） 效果图： 在html中： <div class="lfzHead"> <div>首页banner设置</div> <el-button type="primary" @click="addBanners">新增(最多5个)</el-button> </div> 中间的图我们需要用到for循环 <div class="lfzImgs"> <div clas
vue商城项目开发：封装banner组件、组件参数传递
学亮编程手记
09-21 680
封装banner组件 在Home组件中引入: components： 在template中使用： 组件参数传递 轮播图可以封装成组件，但是每个页面要展示的图片内容可能不一样，所以要进行参数传递，你传什么我就展示什么。此即所谓的组件参数传递。 传递的参数名称可以自定义： 定义要传递的参数： 参数名称和参数的值： Banner组件接收参数： 也可以传递一个对象作为参数： Banner组件使用对象接收参数： 【发现】组件中传递参数给Banner组件： ...
vue-cli-webpack:vue-cli 2.9.6版本初始化webpack工程
09-07
而vue-cli 2.9.6版本是其一个较早的版本，可以使用它来初始化一个基于webpack的Vue.js工程。 使用vue-cli 2.9.6版本初始化webpack工程，首先需要确保本地已安装了node.js和npm。 在命令行中执行以下命令来安装vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java大饭桶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值