NPM引入组件

前言：

原来前端开发的适配也是如此的杂乱无章，感觉比移动端还扯淡，特别是IE8及以下的。

在安卓开发中，我们需要经常引入第三方组件，那么在前端改怎么引入的？以我们移动端常见的轮播图为例，

首先在gitHub上找到轮播图的组件

https://github.com/amazeui/swiper      //git 上的地址

下面是使用说明

使用说明：

获取 Amaze UI Swiper
直接下载
使用 NPM: npm install amazeui-swiper
引入 Swiper 样式（位于 dist 目录下的 CSS）：
<link rel="stylesheet" href="path/to/amazeui.swiper.min.css"/>
在 jQuer 后面引入 Swiper 插件（位于 dist 目录下）：
<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.swiper.min.js"></script>

有两种引入方式，

• 直接下载copy到你本地（就相当于终端的下载库，然后导入到项目中，然后引入）
• 使用NPM下载，然后再引入

对于NPM不熟悉的可以看下这个https://www.jianshu.com/p/19e490e7f9aa

接下来在我们的Html中引入改轮播图（下载好的资源在node_modules文件夹下）

 <link rel="stylesheet" href="node_modules/amazeui-swiper/dist/amazeui.swiper.css" />
    <link rel="stylesheet" href="node_modules/amazeui-swiper/dist/amazeui.swiper.min.css" />

上面是CSS的引入

<script type="text/javascript" src="js/jquery.js"></script>
    <script src="node_modules/amazeui-swiper/dist/amazeui.swiper.js"></script>
    <script src="node_modules/amazeui-swiper/dist/amazeui.swiper.min.js"></script>
    <script src="js/2.0test.js"></script>

这里一定要注意引入的顺序，不然会导致找不到资源，最好把juery.js放在最上面，因为所有的js都需要用到，然后把自己的js文件放在最下面，因为你自己的js文件中可能需要引入三方js的文件

运行结果如下：