前端第三方库和插件

1、swiper插件

www.swiper.com.cn
www.superslide2.com
github.com/cubiq/iscroll

2、插件的使用总结
(1)确认插件实现的功能
(2)去官网查看使用说明
(3)下载插件
(4)打开demo实例文件,查看需要引入的相关文件,并且引入
(5)复制demo实例文件中的结构html,样式css以及js代码
3、jQuery下载网址

www.jQuery.com

4、下载jQuery其他版本

www.code.jQuery.com

5、jQuery插件常用的网站

jQuery之家: http://www.htmleaf.com
jQuery插件库:(懒加载)
http://www.jq22.com

(3)jQuery插件使用步骤
[1]引入相关文件。(jQuery文件和插件文件)
[2]复制相关html、css、js(调用插件)
6、图片懒加载(图片使用延迟加载可以提高网页下载速度,它也能帮助减轻服务器负载)
7、全屏滚动(fullpage.js)
gitHub:

http://github.com/alvarotrigo/fullPage.js

中文翻译网站:

http://www.dowebok.com/demo

8、bootstrap需要的文件
(1)bootstrap.min.css
(2)jquery.min.js
(3)bootstrap.min.js
8.2、vs code插件
Bootstrap 3 Snippets
9、flexible.js下载网址

https://github.com/amfe/lib-flexible

10、px转换成rem
(1)首先下载个插件cssrem
(2)修改默认文字大小,直接在搜索设置输入cssroot即可找到,并可以修改想要的大小
11、px转换成vw
(1)下载插件px2vw
(2)接着在扩展设置修改默认宽度
12、Node.js的官网地址
13、搜索包

www.npmjs.com

14、下载包

www.registry.npmjs.org

Node.js
15、快速创建package.json

命令:npm init -y

注意:
(1)上述命令只能在英文的目录下成功运行!所以项目文件夹的名称一定要用英文命名,不要使用中文,不能出现空格。
(2)运行npm install 命令安装包的时候,npm包管理工具会自动吧包的名称和版本号,记录到package.json中
16、一次性安装所有的包

npm install

17、如果某些包只在项目开发阶段会用到,在项目上线之后不会用到,则建议把这些包记录到devDependencies节点中。与之对应的,如果某些包在开发和项目上线之后都需要用到,则建议把这些包记录到dependencies节点中。
(1)安装指定的包,并记录到devDependencies节点中
npm i 包名 -D
18、解决下包速度慢的问题
1、切换npm的下包镜像源
(1)查看当前的下包镜像源

npm config get registry

(2).将下包的镜像源切换为淘宝镜像源

npm config set registry=https://registry.npm.taobao.org

(3).检查镜像源是否下载成功

npm config get registry

2、为了更方便的切换下包的镜像源,我们可以安装nrm这个小工具,利用nrm提供的终端命令,可以快速查看和切换下包的镜像源。
(1)通过npm包管理器,将nrm安装为全局可用的工具

npm i nrm -g

(2)查看所有可用的镜像源

nrm ls

(3)将下包的而镜像源切换为taobao镜像源

nrm use taobao

19、i5ting_toc是一个可以把md文档转为html页面的小工具,使用步骤如下:
(1)将i5ting_toc安装为全局包

npm install -g i5ting_toc

(2)调用i5ting_toc,轻松实现md转html功能
i5ting_toc -f 要转换的md文件路径 -o
20、在线版的jQuery文件

www.staticfile.org

21、webpack下载、配置
下载

npm install webpack@5.42.1 webpack-cli@4.7.2  -D

配置
(1)在项目根目录中,创建名为webpack.config.js的webpack.config.ks的webpack配置文件,并初始化如下的基本配置:

moudle.exports ={
        mode: 'development'
}

(2)在package.json的scripts节点下,新增dev脚本如下:

"scripts": {
    "dev": "webpack"
}

(3)在终端中运行npm run dev命令,启动webpack进行项目的打包构建
22、在webpack.config.js配置文件中,通过entry节点指定打包的入口。通过output节点指定打包的出口。
示例代码如下:

const path = require('path')
moudle.exports = {
     entry: path.join(_dirname, 'src/js/index.js)
     output: {
           path:path.join(_dirname,'dist'),
           filename: 'bundle.js'
}
}

23、webpack插件(webpack-dev-server自动打包)
(1)下载

npm i webpack-dev-server@3.11.2 -D

(2)配置
A.修改package.json scripts中的dev命令如下:

"scripts":{
    "dev": "webpack  server"
}

B.再次运行npm run dev 命令,重新进行项目的打包
C.在浏览器中访问http://localhost:8080地址,查看自动打包效果
在修改样式文件的样式的时候会起不到作用,
原因:不配置webpack-dev-server时,webpack打包生成的文件,会放到实际的物理磁盘上,但是配置web-dev-server时,webpack打包生成的文件,放到了内存中,也就是在根目录里

image.png

webpack插件(html-webpack-plugin自动打包)
(1)下载html-webpack-plugin插件

npm i html-webpack-plugin@4.5.0 -D

(2)配置--在webpack.config.js中操作
点击保存时自动打开网页


image.png

24、axios
中文官网地址:

www.axios-js.com

英文官网地址:

www.npmjs.com/package/axios

25、安装Vuter插件可以在.vue文件当中打一个<时有提示
26、vant网址

https://vant-contrib.gitee.io/vant/v1/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,367评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,959评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,750评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,226评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,252评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,975评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,592评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,497评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,027评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,147评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,274评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,953评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,623评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,143评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,260评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,607评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,271评论 2 358

推荐阅读更多精彩内容