前端第三方库和插件

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 [email protected] [email protected]  -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 [email protected] -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 [email protected] -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/

你可能感兴趣的:(前端第三方库和插件)