欢迎加入前端交流群来py

试了好多方法,npm install 方法失败了,下载到本地是可以使用的;

将swiper文件放到assets文件下;

项目目录下:(命令行)

因为ts并不能准确识别js语法,所以需要用ts中的interface接口,将js转化成ts并暴露出来

npm install @types/swiper --save
npm install @types/swiper --save-dev

备注:--save配置在生产环境;--save-dev配置在开发环境

在index.html文件里引入:

<link rel="stylesheet" type="text/css" href="./assets/css/swiper-3.4.2.min.css" />
<script type="text/javascript" src="./assets/js/swiper-3.4.2.min.js"></script>

全局引入swiper

在typings.d.ts文件内 声明全局的jquery对象。全局的对象一般都放在这里声明

组件内引入swiper

import * as swiper from 'swiper'

组件里写入swiper的代码结构:

启动swiper:

angular4(2-2)angular脚手架引入第三方类库(swiper)的更多相关文章

  1. angular4(2-1)angular脚手架引入第三方类库(jquery)

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 如何在angular4脚手架中引入第三方类库呢比如jquery.swiper.bootstrap...... 例如引入j ...

  2. Laravel Controller中引入第三方类库

    Laravel 引入第三方类库 在Controller中引入自定义的php文件,先在app目录下创建一个新的文件夹,命名Tools(可自定义),接着创建一个MyTest.php: <?php c ...

  3. TP3.2之引入第三方类库文件和普通.php文件

    1.引入第三方类库 .class.php文件 1.1 类库有写namespace命名空间 namespace Org\Util; class Auth { } 保存到ThinkPHP/Library/ ...

  4. laravel5.3引入第三方类库的方法

    laravel版本:5.3 今天做的是引入第三方的phpquery类库,方法: 在laravel的app目录下自定义一个文件夹,我用的名字是:Libs 然后直接将phpquery类库扔进这个目录 在c ...

  5. TP5 中引入第三方类库

    通过了解tp5的目录结构,我们知道其中有两个目录是纺织扩展类库文件的. extend是放置自定义或者其他类文件的. vendor目录是放置composer类库文件的. 当我们的第三方类库文件是下载的, ...

  6. thinkphp 3.2,引入第三方类库的粗略记录

    首先用第三方类库我是放到vendor里面的 根目录\ThinkPHP\Library\Vendor\Wxphp 例如创建了一个Wxphp文件夹,里面有个php文件叫做     zll.php    文 ...

  7. Laravel 引入第三方类库及自定义函数

    1.新建一个目录放第三方类库 2.找到composer.json文件打开,在里面autoload 下classmap下面加入类库路径 3根目录下运行composer dumpautoload 4.使用 ...

  8. android studio 引入第三方类库jar包

    第三方类库jar包 这就简单多了,直接将jar包拷贝到app/libs下,然后在app下的build.gradle中添加此jar的依赖.如下: dependencies { compile 'com. ...

  9. iOS开发引入第三方类库的问题

    在开发iOS程序的过程中,通常在导入第三方的类库(.a/.o)文件会报出一系列的错误: Undefined symbols for architecture i386: "std::stri ...

随机推荐

  1. h5-列表

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAX4AAAInCAIAAAAQ0aUJAAAgAElEQVR4nOy9eVxb153wnZk+z/t53n ...

  2. Fuzzy C Means 算法及其 Python 实现——写得很清楚,见原文

    Fuzzy C Means 算法及其 Python 实现 转自:http://note4code.com/2015/04/14/fuzzy-c-means-%E7%AE%97%E6%B3%95%E5% ...

  3. php基础知识(一)--2017-04-14

    1.Php的两种打开方式: 第一种方式:地址栏打开:http://localhost/0414/qq.php     地址栏输入localhost/  就是phpstudy下的www文件夹 第二种:新 ...

  4. 子线程中刷新了UI

    This application is modifying the autolayout engine from a background thread, which can lead to engi ...

  5. iis 部署

    配置错误1: 由于权限不足而无法读取配置文件 建立一个新用户,分配所有权限 http://blog.csdn.net/jaychouliyu/article/details/7237143 配置错误2 ...

  6. POJ 2353 DP

    双向DP+记录路径. // by SiriusRen #include <stack> #include <cstdio> #include <cstring> u ...

  7. 看似简单!解读C#程序员最易犯的7大错误

    编程时犯错是必然的,即使是一个很小的错误也可能会导致昂贵的代价,聪明的人善于从错误中汲取教训,尽量不再重复犯错,在这篇文章中,我将重点介绍C#开发人员最容易犯的7个错误. 格式化字符串 在C#编程中, ...

  8. Linux top命令简解

    简介: top 命令是最流行的性能监视工具之一,它是一个优秀的交互式工具,用于监视性能.它提供系统整体性能,但报告进程信息才是 top 命令的长处. top 界面分为两个部份,光标上面部份显示关于系统 ...

  9. nginx 与 Windows 错误

    设置根目录 root "D:/www/app"; proxy_pass 反向代理 404 location php 模块添加 fastcgi_split_path_info ^(( ...

  10. 让html页面不缓存js的实现方法

    很多朋友都会碰到这样的情况:如果我们页面加载了js的话下次打开时也会是调用这个js缓存文件,但对于我们调试时是非常的不方便了,本文就来谈论如何解决这一问题,下面一起来看看. 不缓存JS的方法其实挺简单 ...