Vue系列入门教程（7）——实现简单轮播图

我们现在将学习的Vue知识应用一下，去实现简单轮播图效果，下面我们来一起看一下实现过程。

1、在HBuildX中使用vue-cli创建vue项目，名为lbt
2、删除无用文件，如图：

3、修改index.html如下：

4、修改App.vue如下（清空组件、模板、样式）：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

5、修改main.js，去掉Vue.config.productionTip = false即可

以上基本项目准备已经完成。

1、在assets目录下，新建images文件夹，从网上下载几张图片，放在其中，以便演示,我这里从淘宝首页下载了3张，大小520*280

2、在assets目录下，新建style目录，在目录中新建名为global.css的全局样式文件，内容如下

*{
	padding: 0;
	margin: 0;
}

3、在main.js中导入全局样式

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

//导入全局样式
import './assets/style/global.css'

注意一定要以./开头。
4、在components目录下新建名为Lbt.vue的轮播图组件

5、在Lbt.vue中输入vbase快速创建组件基础模板：

模板代码如下：

6、开始开发轮播图组件，代码如下：

[v_blue]注意：使用vue-cli，在template中图片如果使用绑定方式，则在data中的图片地址必须要使用require引入之后才能显示，否则无法显示，因为vue-cli会将图片打包到img目录下。但是如果在temeplate中直接引用如下：
<img class=”pic” src=”../assets/images/pic1.jpg” alt=””/>
是能够正常显示的。[/v_blue]
7、在App.vue中引入、注册、使用Lbt.vue组件

8、运行到浏览器访问，成功实现轮播效果

9、我们这里只实现了点击轮播，有兴趣的可以再自行实现自动轮播效果