NPM引入组件

前言:

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

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

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

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

下面是使用说明

使用说明:

获取 Amaze UI Swiper
直接下载
使用 NPM: npm install amazeui-swiper
引入 Swiper 样式(位于 dist 目录下的 CSS):

在 jQuer 后面引入 Swiper 插件(位于 dist 目录下):

有两种引入方式,

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

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

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

 
    

上面是CSS的引入


    
    
    

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

运行结果如下:

NPM引入组件_第1张图片

 

 

 

你可能感兴趣的:(前端基础)