vue项目中引入第三方框架

时间:2022-08-28 14:44:05

element-ui

  npm install element-ui -- save;

  main.js中

    import Element from 'element-ui';

    import 'element-ui/lib/theme-chalk/index.css';

    Vue.use(Element);

swiper

  npm install vue-awesome-swiper --save

  main.js中

    import VueAwesomeSwiper from 'vue-awesome-swiper';

    import 'swiper/dist/css/swiper.css';
    Vue.use(VueAwesomeSwiper);
  
  页面中用法  
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>
        <img src="../../assets/home/home_banner_1.png"/>
      </swiper-slide>
      <swiper-slide>
        <img src="../../assets/home/home_banner_2.png"/>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
 
    
     data中: 
      swiperOption: {
        loop: true,
        speed: 1000,
        autoplay: {
          delay: 2000,
          autoplayDisableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
 
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    }
  
  

vue项目中引入第三方框架的更多相关文章

  1. vue-cli项目中引入第三方插件

    前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...

  2. vue element-ui中引入第三方icon

    vue element-ui中引入第三方icon 把图标加入项目 设置项目名称,下载项目(项目名称自定义) 解压项目到开发目录 在main.js中全局引入css文件 修改下载下来的项目中的css文件, ...

  3. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  4. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  5. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  6. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  7. 如何在Vue项目中引入jQuery&quest;

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  8. vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等

    项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...

  9. vue-cli创建的项目中引入第三方库报错 &&num;39&semi;caller&&num;39&semi;&comma; &&num;39&semi;calle&&num;39&semi;&comma; and &&num;39&semi;arguments&&num;39&semi; properties may not be&period;&period;&period;

    http://blog.csdn.net/sophie_u/article/details/76223978 以在vue中引入mui第三方库为例: 虽然针对vue,有单独的vue-mui库可以使用,但 ...

随机推荐

  1. &lbrack;整&rsqb; JavaScript m选n组合算法

    01转换法: 思路是开一个数组,其下标表示1到m个数,数组元素的值为1表示其下标代表的数被选中,为0则没选中. 首先初始化,将数组前n个元素置1,表示第一个组合为前n个数. 然后从左到右扫描数组元素值 ...

  2. 两个C&plus;&plus;对象是否相等,要程序员自己下定义,通常是覆盖&equals;&equals;操作符

    我曾经好多年对Java的==和equals的区别和联系搞不清楚,后来搞清楚了,笔记在这里: http://www.cnblogs.com/findumars/p/3240761.htmlhttp:// ...

  3. CMP指令(转)

    刚刚看到了cmp指令,一开始有点晕.后来上网找了些资料,终于看明白了,为了方便初学者,我就简单写下我的思路吧.高手绕过,谢谢! cmp(compare)指令进行比较两个操作数的大小 例:cmp opr ...

  4. 调用有道翻译API

    前两天朋友说起NASA开放了数据API,今儿突然想起从来没用过外部提供的API,然而简单用得多的貌似是有道词典API,就像试试,本来觉得应该挺简单的,用urllib模块很快就实现了. 不过测试时才发现 ...

  5. 编写PHP代码总结

    1- 编写模块化代码 良好的PHP代码应该是模块化代码.PHP的面向对象的编程功能是一些特别强大的工 具,可以把你的应用程序分解成函数或方法.你应该尽可能多的从你的应用程序的服务器端分开前端的HTML ...

  6. iOS-NSPredicate正则验证【三种验证方法】

    1.NSPredicate验证(谓词匹配) ///验证(string:验证的字符串) + (BOOL)stringValidate:(NSString *)string{ NSString *regu ...

  7. 在windows环境下编译hadoop

    1.环境准备 1.1 JDK的安装 下载jdk1.6.0_43(这里务必要使用jdk的1.6版本,因为使用JDK1.7版本编译hadoop的时候,很多Maven依赖下载不完整,最终会报错)解压到,并将 ...

  8. 学习React前端框架,报错 &&num;39&semi;React&&num;39&semi; must be in scope when using JSX react&sol;react-in-jsx-scope

    问题 import react from 'react'  改成  import React from 'react'   小写 react  改成 React

  9. BZOJ 2957 楼房重建&lpar;线段树区间合并&rpar;

    一个显而易见的结论是,这种数字的值是单调递增的.我们修改一个数只会对这个数后面的数造成影响.考虑线段树划分出来的若干线段. 这里有两种情况: 1.某个线段中的最大值小于等于修改的数,那么这个线段的贡献 ...

  10. modelsim使用常见问题及解决办法集锦③

    四.You selected Modelsim-Altera as Simulation Software in EDA Tool Settings,however…… You selected Mo ...