html vue轮播图,webpack+Vue实现轮播图

迈不过友情╰ 2022-10-19 01:39 198阅读 0赞

前言

本来如果只是想做个轮播图的话不太需要这么麻烦的构建webpack项目，但是我的目的不是只做个轮播图这么简单，主要是想用webpack搭建一个vue项目，然后在里面实现了一个轮播图组件。在这个框架的基础上还可以实现很多其他的功能，大家可以下载源码自己往里面加东西。这里我提供本项目的github地址，希望大家批评指正！！！

![b598d6e7380c54fb9a9354a34a437ddf.png][]

通过webpack构建vue项目

通过webpack构建vue项目和构建普通项目基本套路都一样，只是需要多添加一个vue-loader的插件来加载并编译.vue文件

这里先放上我的文件目录：

![6847902219027611662][]

dist文件夹放的是编译之后的文件

node\_modules是项目依赖

index.html是项目的首页，编译完之后，在dist文件下也会有一个index.html文件

src是代码主要的文件夹(里面的main.js文件是项目的入口文件，它会被编译成dist文件夹下面的demo.js文件)，我们主要的编码工作就是在这个文件夹下面进行的，可以根据自己的需求，在这个文件夹下面分一些子文件夹。

package.json文件保存的项目的版本信息，依赖信息等

webpack.config.js是项目的配置文件，规定了文件加载方式，入口出口地址等(entry，output，loader，plugin等)

主要搭建步骤：

1、引入webpack

npm install webpack --save-dev

2、引入vue

npm install vue --save

3、引入babel

npm install --save-dev babel-core babel-loader

4、引入加载器(css、file、font等等)

npm install --save-dev css-loader style-loader

注意：引入之后需要在webpack.config.js文件里面配置文件的加载方式

module: \{

rules: \[

test: /\\.js$/,

loader: "babel-loader",

\},

test: /\\.css$/,

loader: 'style-loader!css-loader'

\},

test: /\\.(png|jpg|gif|svg)$/,

use: \['file-loader'\]

\},

test: /\\.(png|jpg|gif|svg)$/,

use: \['url-loader'\],

\},

test: /\\.(woff2?|eot|ttf|otf)(\\?.\*)?$/,

loader: 'url-loader',

options: \{

limit: 10000

\}复制代码

5、引入vue-loader

npm install --save-dev vue-loader vue-template-compiler

在webpack.config.js文件里面配置

test: /\\.vue$/,

loader: 'vue-loader'

\}复制代码

6、引入HtmlWebpackPlugin 插件

npm install --save-dev html-webpack-plugin

webpack.config.js文件里面配置

plugins:\[

new HtmlWebpackPlugin(\{

title: 'vue demo',

\})

复制代码

7、配置webpack-dev-server

在我们实际开发中需要将代码部署在server中，而不是在浏览器中直接打开文件。此时我们需要使用webpack的 webpack-dev-server。

npm install --save-dev webpack-dev-server

在webpack.config.js 文件中需要指定一个文件夹,告诉开发服务器需要从哪儿加载文件

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = \{

entry: './src/main.js',

output: \{

path: path.resolve(\_\_dirname, 'dist'),

filename: "demo.js"

\},

plugins: \[

new HtmlWebpackPlugin(\{

title: 'vue demo',

\})

\],

devServer:\{

contentBase:"./dist"

\},

module: \{

rules: \[\{

test: /\\.js$/,

loader: "babel-loader",

\}, \{

test: /\\.css$/,

loader: 'style-loader!css-loader'

\}, \{

test: /\\.(png|jpe?g|gif|svg)(\\?.\*)?$/,

loader: 'url-loader',

options: \{

limit: 10000

\},

test: /\\.(woff2?|eot|ttf|otf)(\\?.\*)?$/,

loader: 'url-loader',

options: \{

limit: 10000

\},

resolve: \{

alias: \{

'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1

复制代码

在package.json中添加一个script脚本

"scripts": \{

"test": "echo \\"Error: no test specified\\" && exit 1",

"dev":"webpack-dev-server --open",

"build": "webpack"

\}复制代码

然后输入如下命令

npm run dev

启动完成浏览器会自动打开页面

8、热部署

new webpack.HotModuleReplacementPlugin()

然后去package.json中，script 里面dev的值中加上 --hot -only

"dev": "webpack-dev-server --hot-only --open"

以上就是搭建webpack的过程，如果需要详细了解请参考这篇文章，或者直接看我的项目

轮播图

这里就分为三部分来讲

App.vue

先写好布局

*  \{ \{index\}\}

复制代码

这里是.vue文件，需要在main.js里面import进去

import Vue from 'vue'

import './style/main.css'

import App from './App.vue'

new Vue(\{

el: '\#app',

components: \{ App \}

\})复制代码

接下来是相关的逻辑代码，也是写在App.vue里面的

export default \{

data () \{

return \{

sliders:\[

img:'./images/1.jpg'

\},

img:'./images/2.jpg'

\},

img:'./images/3.jpg'

\},

img:'./images/4.jpg'

\},

img:'./images/5.jpg'

\],

currentIndex:0,

timer:null,

initialInterval:5

\},

computed:\{

containerStyle()\{ //这里用了计算属性，用transform来移动整个图片列表

return \{

transform:\`translate3d($\{this.currentIndex\*-600\}px, 0, 0)\`

\},

created() \{

//在DOM加载完成后，下个tick中开始轮播

this.$nextTick(() => \{

this.timer = setInterval(() => \{

this.play()

\}, 2000)

\})

\},

methods:\{

play()\{

this.currentIndex++;

if (this.currentIndex > this.sliders.length - 1) \{

this.currentIndex = 0

//console.log(this.currentIndex);

\},

go()\{

this.timer = setInterval(() => \{

this.play()

\}, 2000)

\},

stop() \{

clearInterval(this.timer)

this.timer = null

\},

change(dotIndex)\{

console.log(dotIndex);

this.currentIndex=dotIndex-1;

复制代码

css代码

\* \{

margin:0;

padding:0;

.container \{

position: absolute;

width: 600px;

height: 400px;

top:0;

bottom:0;

right:0;

left:0;

margin:auto;

box-shadow: 0 0 5px green;

overflow: hidden;

.wrap \{

position: absolute;

width: 3000px;

height: 400px;

.container .wrap li \{

float: left;

width: 600px;

height: 400px;

list-style-type:none ;

.container .wrap .img \{

float: left;

width: 600px;

height: 400px;

object-fit: cover;

.container .dot \{

position: absolute;

right: 150px;

bottom:20px;

width: 200px;

height: 10px;

z-index: 2;

.container .dot li\{

margin-left: 5px;

display: inline-block;

width: 15px;

height: 15px;

border-radius: 50%;

background-color: gray;

text-align: center;

color:white;

cursor: pointer;

font-size:5px;

.container .dot .active\{

background-color: green;

复制代码

index.html文件

vue demo

复制代码

然后轮播图就完成啦

[b598d6e7380c54fb9a9354a34a437ddf.png]: /images/20221005/2f8bb61ede0d4074889eb1112d21e572.png
[6847902219027611662]: /images/20221005/ce2ae5a4f7134908912da0be0b4c3fc3.png