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?

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

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

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

  9. vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...

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

随机推荐

  1. [RabbitMQ学习笔记] - 初识RabbitMQ

    RabbitMQ是一个由erlang开发的AMQP的开源实现. 核心概念 Message 消息,消息是不具名的,它由消息头和消息体组成,消息体是不透明的,而消息头则由 一系列的可选属性组成,这些属性包 ...

  2. mysql表分区存储过程

    本文为博主原创,未经允许不得转载: 由于数据库一张表数据量有几千万条,而且在不断增长,看见公司前辈写了一个创建表分区的存储过程,感觉 甚是牛逼,在此供自己保留学习. /*PROCEDURE creat ...

  3. dataTable表头未对其解决方法

    本文为博主原创,未经允许不得转载: 在tab页中使用dataTable时,默认显示的dataTable表头与数据显示正常,另一个的datatable则表头与数据未对其. 检查元素发现,datatabl ...

  4. 【译】第18节---数据注解-ForeignKey

    原文:http://www.entityframeworktutorial.net/code-first/foreignkey-dataannotations-attribute-in-code-fi ...

  5. hdu 3208 Integer’s Power 筛法

    Integer’s Power Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. PostMan做接口自动化测试

    try{ var jsonData = pm.response.json(); } catch (e) { console.log("No body"); } pm.environ ...

  7. Linux系统vi或者vim编辑器中如何显示行号

    设置行号很简单 我们要到vi或者vim编辑器的命令模式下,输入set number :set number 按下回车就显示行号了 那么怎么关闭行号呢? 很简单,我们只要再到vi或者vim编辑器的命令模 ...

  8. The content of element type "web-app" must match "(icon?,display-name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,servlet- mapping*,session-config?,mime-map

    修改了一下web.xml,加入了一个<filter>,然后就报这样的错??? The content of element type "web-app" must ma ...

  9. R语言barplot双坐标作图

    需要注意的是,设置其中的柱子的宽度,间隔的宽度.有公式如下 width为柱子的宽度 space为间隔宽度 barnumbers 为柱子数量 那么xlim的设置右侧范围为:(width + space) ...

  10. 《剑指offer》第五十九题(滑动窗口的最大值)

    // 面试题59(一):滑动窗口的最大值 // 题目:给定一个数组和滑动窗口的大小,请找出所有滑动窗口里的最大值.例如, // 如果输入数组{2, 3, 4, 2, 6, 2, 5, 1}及滑动窗口的 ...