当前位置: 首页 > Web前端 > vue.js

vue导入swipervue使用swipervue脚手架使用swiper-导入js文件-导入css文件

时间:2023-04-01 12:31:43 vue.js

.swiper-container{width:500px;的组件中写一些样式。高度:300px;边距:20px自动;}vue介绍swipervue使用swipervue脚手架使用swiper/导入js文件/导入css文件欢迎加入前端交流群获取视频资料和前端学习资料:749539640转载文章请注明出处!如果只是想使用轮播效果,可以参考一些vue组件;比如这篇文章--------2019.7.9----------------请参考官方swiper插件:https://github.com/surmon-china/vue-awesome-swiper------2019.7.9----------------方法一:(请优先使用此方法;更新于2018-05-14)下载swiper:npminstallswiper--save-devswiper4.0使用入口:http://www.swiper.com.cn/usage/index.html;html:幻灯片1

幻灯片2
幻灯片3
在需要使用swiper的组件中引入swiper,将swiper的初始化放在mounted(你可以把官网的ExamplestartupvarmySwiper=delete);js:css:在main.js中引入cssimportVuefrom'vue'import'swiper/dist/css/swiper.css';然后我们在使用swiper.swiper-container{width:500px;的组件中写一些样式。高度:300px;边距:20px自动;}------------------------------------我是分界线---------------------------------------------------------方法二:(以下是2017年10月写的,废弃)1.安装vue-cli参考地址:https://gitub.com/vuejs/vue-cli如果不使用严格的语法,则需要在最后三项中标记no;(添加起来很头疼,老是报错,不过对你的代码规范化也很有帮助)2、swiper下载示例代码参考地址:http://www.swiper.com.cn/usage/index.html1:单个组件的使用:3.在新下载的vue-cli中的helloworld.vue中编写代码#####3.1html部分:1####3.2js部分:这里使用import导入swiper.js文件;swiper的启动是在mounted中执行的;#####3.3csspart:12@import'../assets/css/swiper.min.css';3正文{4边距:0;5填充:0;6}7.swiper-container{8宽度:500px;9高度:300px;10边距:20px自动;11}1213144.貌似大功告成了,但是这时候会报错:UncaughtTypeError:Cannotassigntoreadonlyproperty'exports'ofobject'#'查看文档是否有这个错误据说:当webpack打包后,你可以在js文件中混用require和export,但不能混用import和module.exports。因为webpack2不允许import和module.exports混用,我们只需要删除.babelrc文件第11行插件项"plugins":["transform-runtime"]中的transform-runtime;1{2"presets":[3["env",{4"modules":false,5"targets":{6"browsers":[">1%","last2versions","notie<=8"]7}8}],9"stage-2"10],11"plugins":[],12"env":{13"test":{14"presets":["env","stage-2"],15"plugins":["istanbul"]16}17}18}5.好了,问题解决了;2:全局使用:6.当然你也可以全局使用swiper;代码如下;刚才还在helloworld.vue写代码;只是去掉js和css文件的引入!helloworld.vue代码:121224546474849body{50margin:0;51padding:0;52}53.swiper-container{54width:500px;55height:300px;56margin:20pxauto;57}585960main.js文件代码:常见错误解决方法:UncaughtTypeError:无法分配给对象“#”的只读属性“exports”。babelrc文件中的插件项"plugins":["transform-runtime"],将transform-runtime删掉即可;