文章目录

  • 一、iconfont字体图标的引用
    • 插画 小图标
    • 使用方法
    • 扩展
    • 二、查看浏览器是否兼容
    • 三、flex布局 中的flexible.js框架
    • 四、VUE中clipboard的使用
    • 五、VUE中core-js介绍安装及使用
    • 六、vue使用element-resize-detector监听元素宽度变化
    • 七、fuse.js在Vue中的使用
    • 八、js-cookie在Vue中的使用
    • 九、js-md5 js进行MD5加密(含中文)
    • 十、Lodash入门及方法汇总(全)
    • 十一、mockjs的使用
    • 十二、 node-sass
    • 十三、Normalize.css简介及详解、使用
    • 十四、nprogress的使用-进度条添加
    • 十五、url 的正则表达式:path-to-regexp
    • 十六、vue项目网页全屏功能screenfull
    • 十七、短ID生成库js-shortid的介绍及应
    • 十八、vue-grid-layout组件的改装--暴露布局方法
    • 十九、vuex详解及实例
    • 二十、Vuex持久化,刷新,vuex-along最详细教程
    • 二十一、XSS学习-从入门到入狱
    • 二十二、ESLint的配置使用VScode eslint-plugin-vue 自动修复eslint报错
    • 二十三、插件中的chalk的用法
    • 二十四、vue-loader&vue-template-compiler详解
    • 二十五、svgo SVG精简压缩工具svgo简介和初体验
    • 二十六、webpack 插件 svg-sprite-loader
    • 二十七、Express的serve-static中间件的使用之五问
    • 二十七、webpack 全局上下文中执行一次 JS 脚本(script-loader)
    • 二十八、runjs
    • 二十九、qiankun
    • 三十、html-webpack-plugin插件【用法总结】
    • 三十一、Vscode 安装Autoprefixer插件(自动补全css兼容性前缀)
    • 三十一、Vscode 安装Autoprefixer插件(自动补全css兼容性前缀)

一、iconfont字体图标的引用

插画 小图标

(阿里巴巴开发)网址链接
https://www.iconfont.cn
相中自己喜欢的样式 --添加到库–添加到项目–新建项目–打开下载的压缩包
可以查看到自己添加的样式对应的类名

使用方法

1.将下载的压缩包解压 重命名为iconfont
将这个文件夹添加至自己的项目中
2.进行iconfont.css样式链接的引入
进行类名的使用
注意 iconfont类名是固定的
并加入自己需要使用图标的类名

扩展

为什么一定要使用iconfont

font-family 不使用 --图标显示不出来(为小方块)

二、查看浏览器是否兼容

单击–查看浏览器是否兼容的网站

三、flex布局 中的flexible.js框架

引入现成的flexible.js 可以代替媒体查询(@media、rem)

四、VUE中clipboard的使用

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中
本文链接:https://blog.csdn.net/qq_24147051/article/details/106908326

五、VUE中core-js介绍安装及使用

因为官方库对他介绍的形容
1.它支持最新的 ECMAScript 标准
2. 它支持ECMAScript 标准库提案
3. 它支持一些 WHATWG / W3C 标准(跨平台或者 ECMAScript 相关)
4. 它最大限度的模块化:你能仅仅加载你想要使用的功能
5. 它能够不污染全局命名空间
6. 它和babel紧密集成:这能够优化core-js的导入
7. 它是最普遍、最流行 的给 JavaScript 标准库打补丁的方式
https://blog.csdn.net/weixin_56650035/article/details/120940799

六、vue使用element-resize-detector监听元素宽度变化

如图,当我们切换左侧菜单展示效果的时候,右侧内容会对应变宽,但此时的echarts并不能执行自适应效果,这是因为切换菜单展示效果并没有触发window.onresize,所以为解决类似此问题,我们可使用element-resize-detector
https://blog.csdn.net/Ag_wenbi/article/details/103047779

七、fuse.js在Vue中的使用

一:地址
https://www.npmjs.com/package/fuse.js
二:安装之后的使用
import Fuse from ‘fuse.js’;//引入
//搜索需要的信息
search(xxxx){
//搜索的所有信息数据
var books = this.allResult;
//console.log(books)
//需要搜索哪个?,分配的权重?
var options = {
keys: [{
name: ‘ProductIDName’,
weight: 0.3
}]
};
//创建新的fuse
var fuse = new Fuse(books, options)
//搜索并得到结果
this.tableConfig.tableData=fuse.search(xxxx)
//console.log(fuse.search(xxxx))
},

八、js-cookie在Vue中的使用

该插件解决了原生js操作cookie的麻烦
https://blog.csdn.net/qq_43248623/article/details/115085305

九、js-md5 js进行MD5加密(含中文)

https://blog.csdn.net/weixin_42275932/article/details/81001616

十、Lodash入门及方法汇总(全)

https://blog.csdn.net/weixin_41229588/article/details/106334552

十一、mockjs的使用

https://blog.csdn.net/xiaoxiaojie12321/article/details/81301399

十二、 node-sass

sass的插件 安装后可以进行sass语法的使用

十三、Normalize.css简介及详解、使用

https://blog.csdn.net/u013946061/article/details/108302849

十四、nprogress的使用-进度条添加

进度条添加

安装nprogress,ui界面依赖安装依赖,搜索nprogress进行安装即可
在main中导入进度条组件
//导入进度条插件
import NProgress from ‘nprogress’
//导入进度条样式
import ‘nprogress/nprogress.css’
利用NProgress.start()显示进度条
NProgress.start()
利用NProgress.done()隐藏进度条
NProgress.done()

十五、url 的正则表达式:path-to-regexp

概述:该工具库用来处理 url 中地址与参数,能够很方便得到我们想要的数据。
js 中有 RegExp 方法做正则表达式校验,而 path-to-regexp 可以看成是 url 字符串的正则表达式。
https://www.jianshu.com/p/7d2dbfdd1b0f

十六、vue项目网页全屏功能screenfull

https://blog.csdn.net/yang1393214887/article/details/105687717

十七、短ID生成库js-shortid的介绍及应

介绍
js-shortid是一个基于node.js的开源短ID的产生器, 其生成的短ID满足无序、不可预测、URL地址友好以及足够短且据有唯一的基本特征。
默认情况下,7-14 URL友好字符:A-Z,a-z,0-9,_-
支持cluster(自动),自定义种子,自定义字母
可以生成任意数量的ID(无重复),甚至每天数百万
可在Node,io.js和Web浏览器中使用
https://blog.csdn.net/jyn15159/article/details/110421010

十八、vue-grid-layout组件的改装–暴露布局方法

vue-grid-layout是一个非常优秀的vue栅格拖动布局的组件
https://blog.csdn.net/weixin_42839080/article/details/88880964

十九、vuex详解及实例

https://blog.csdn.net/qq_41647999/article/details/85274396

二十、Vuex持久化,刷新,vuex-along最详细教程

https://blog.csdn.net/qq_45296433/article/details/109594413

二十一、XSS学习-从入门到入狱

https://blog.csdn.net/qq_45884195/article/details/107136606

二十二、ESLint的配置使用VScode eslint-plugin-vue 自动修复eslint报错

具体规范
声明变量但是未使用会报错
简单语句结尾不能有分号
给变量赋值 等号 左右要求有空格
在行结尾处,多余的空格不允许
字符串必须使用单引号圈选,不能是双引号
对象成员名称冒号与值之间需要有一个空格
方法名称小括号 的左右需要保留一个空格
在每一个文件的结尾处,必须有一个空行
文件中如果出现空白行,要求只能有一行空白,不能连续出现两行或以上的空白行

注意:
eslint只是代码规范,不是语法错误,不规范的代码可以正常运行
eslint只是针对 js文件 和 vue文件的js部分 做规范检查

https://blog.csdn.net/jyn15159/article/details/108757351

二十三、插件中的chalk的用法

chalk是一个颜色的插件。可以通过chalk.blue(‘hello world’)来改变颜色,但是我并没有式样成功,有待验证。
可以参考 npm chalk官网
简单用法

$ npm install chalk

const chalk = require(‘chalk’);

console.log(chalk.blue(‘Hello world!’));

https://blog.csdn.net/sqrtsix/article/details/76615630

二十四、vue-loader&vue-template-compiler详解

https://blog.csdn.net/ligang2585116/article/details/104576582

二十五、svgo SVG精简压缩工具svgo简介和初体验

svgo简介

项目地址:https://github.com/svg/svgo, 目前4000+星星~ 随着SVG的高歌猛进,以后一定会平稳增加。

svgo是SVG Optimizer的简写,不过,我似乎更喜欢理解为SVG, go! 这是一个基于Nodejs的SVG文件优化工具。

为什么需要?
因为SVG文件,尤其从各种变假期导出的SVG,通常包含大量的无用信息,例如编辑器源信息,注释,因此元素,默认或者非最优值,以及其他一些不会影响渲染结果的可以移除或转换的内容。

能做什么?
SVGO基于插件模式构建,基本上所有的优化都是一个分离的插件。
http://www.zhangxinxu.com/wordpress/?p=5278

二十六、webpack 插件 svg-sprite-loader

最近开始看 Vue 了,首先用官方的模版把项目快速搭建起来:
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
现在的项目 webpack 几乎是标配了,各种插件好用到爆。现在我们要接触的是一个叫 svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html,接下来就可以在模版中方便地使用 svg-sprite 技术了。
使用 svg-sprite 的好处
如果不知道 svg-sprite 是什么,可以参考大神张鑫旭的文章:未来必热:SVG Sprite技术介绍
页面代码清爽
可使用 ID 随处重复调用
每个 SVG 图标都可以更改大小颜色

https://blog.csdn.net/weixin_46759393/article/details/118445034

二十七、Express的serve-static中间件的使用之五问

https://blog.csdn.net/liangklfang/article/details/51049031

二十七、webpack 全局上下文中执行一次 JS 脚本(script-loader)

https://blog.csdn.net/hbiao68/article/details/104095726

二十八、runjs

RunJS

RunJS 是一个在线的 HTML、Javascript、CSS 等 web 前端代码的编辑分享平台,拥有实时预览、高亮显示、代码格式化等功能,我们提供 OSChina、微博、qq、github、google、yahoo、hotmail 这七种登录方式,你只需要有七种任意一个帐号就可以点击右上角的登录按钮来立即体验 RunJS。
http://runjs.cn

二十九、qiankun

什么是qiankun

官方记载:qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

微前端架构的核心价值

1、
技术栈无关:主框架不限制接入应用的技术栈,微应用具备完全自主权
简言之,融合技术栈,不限制子应用使用的技术栈
2、
独立开发、独立部:微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
3、
增量升级:在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
核心价值中最重要的一点,当我们需要对旧项目使用新技术栈开发新功能时,重构旧代码显然是费时费力且风险较高的,此时可以使用新技术栈开发新功能然后通过微前端架构嵌入到旧项目中。
4、
独立运行时:每个微应用之间状态隔离,运行时状态不共享
话不多说,直接通过实战来正式使用qiankun(以两个vue项目为例)
https://blog.csdn.net/qq_38280242/article/details/115439757

三十、html-webpack-plugin插件【用法总结】

html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件,如果直接将 html 文件置于 ./src 目录中,用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。
https://segmentfault.com/a/1190000016362967

三十一、Vscode 安装Autoprefixer插件(自动补全css兼容性前缀)

https://blog.csdn.net/qq_25194685/article/details/105425920

三十一、Vscode 安装Autoprefixer插件(自动补全css兼容性前缀)

前端之- 一些外部引入的样式、框架、杂七杂八--vue常用依赖用法相关推荐

  1. 徐志摩题要求:•使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 •使用ID选择器设置p段

    徐志摩题要求: •使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 • ...

  2. 在html中加入外部css样式,如何引入CSS样式表?

    CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式 行内式也称内联样式 ...

  3. 从事前端多年,我是这样看待三大框架的

    Vue.Angular.React对比 前端在复杂性日增的今天,三个框架被我们熟知,Vue.React.Angular,三个经常经常被我们拿来讨论,对比,比如学习哪个? 前端框架解决的核心问题 在我入 ...

  4. 组件的生命周期,小程序如何引入第三方ui框架

    笔记 组件开发的三要素 properties //相当于vue中的props接收属性 triggerEvent//相当于vue中是$emit slot//和vue是类似的slot 1.可以通关slot ...

  5. 介绍|三大前端框架之Vue

    近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师.开发工程师.软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员.那么Web前端三大主流框架是什么呢? Vue. ...

  6. 学习web前端你必须要了解的主流框架!

    如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富. 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端至少要懂的三个部分:HTML,C ...

  7. 外链引入css有哪些方式_引入CSS样式表的方式有哪些?

    CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式 行内式也称内联样式 ...

  8. 好程序员HTML5前端教程-css的引入方式和选择器

    好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超 ...

  9. 外链式样式表_引入CSS样式表(书写位置)

    CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片 ...

最新文章

  1. Python 之 Numpy (三)运算
  2. PHP 用图片输出验证码 无法正常显示
  3. JSP EL 表达式取request parameter
  4. 将list对象转换为QuerySet对象
  5. java按钮退出_java – 如何在此程序中添加退出按钮?怎么样“清楚”?
  6. unity 地图编辑器_基于Unity的场景基础测试
  7. 用Fiddler调试localhost
  8. [LinuxVim]基础01
  9. php对引用的简单理解
  10. Boxee智能电视机顶盒在美国CES亮相
  11. “中国创业第一书”签售会将在蓉城举行(转)
  12. AD15实际工程的基本操作
  13. 在线全网音乐搭建源码_支持下载
  14. 文章标题怎么伪原创?火车头标题伪原创插件
  15. 一起来学SpringCloud之 - 服务认证(JWT)
  16. 方向导数和梯度概念辨析
  17. 小程序的横向二级顶部导航条,可以切换、拖动、二级定位在一级的下面,高度怎么办
  18. Juniper路由器基本命令及中文解
  19. 221007工作日志:SPSS logistic回归分析结果释读详解
  20. 2022年数学建模国赛--赛后总结

热门文章

  1. Flexsim常见问题记录
  2. Sign in with Apple(苹果授权登陆)
  3. 如何使用phpunit运行单一测试方法?
  4. STM32入门之LCD1602驱动
  5. 程序员初学者频繁使用count(*),被组长批评后怒怼:性能并不拉垮
  6. SAP批次管理-内容概览
  7. 计算机调查作文600字,电脑迷作文600字
  8. 13个球一个天平,现知道只有一个和其他的重量不同,问怎样称才能用3次就找到那个球?
  9. 【棋牌游戏】JAVA服务器设计与开发(一)
  10. python公众号文章爬虫_拒绝低效!Python教你爬虫公众号文章和链接