vue项目全局引入vue-awesome-swiper插件做出轮播效果

在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托管在GitHub中,供下载并理解。

vue项目全局引入vue-awesome-swiper插件做出轮播效果

vue项目自动生成完毕后,继续在命令行窗口输入cd swiper-test,将目录切换到swiper-test。

vue项目全局引入vue-awesome-swiper插件做出轮播效果

下面就开始启动vue项目了,输入启动命令行:npm run dev。

vue项目全局引入vue-awesome-swiper插件做出轮播效果

 

打开浏览器输入网址:localhost:8080

vue项目全局引入vue-awesome-swiper插件做出轮播效果

 

环境搭好了,进入主题,要想引入vue-awsome-swiper插件,还得下载vue-awesome-swiper模块包,我是通过npm来下载的,虽然很慢,但我有耐心。在swiper-test目录下打开命令行窗口,输入npm install vue-awesome-swiper --save。若正常的话,node_modules文件夹中就有vue-awesome-swiper文件夹以及相关文件生成。

vue项目全局引入vue-awesome-swiper插件做出轮播效果

我用开发工具Hbuilder打开swiper-test项目,找到目录src/main.js,开始编辑代码,引入vue-awesome-swiper模块:

import VueAwesomeSwiper from "vue-awesome-swiper";

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpjfdy.html