- 博客(178)
- 收藏
- 关注
RSS订阅原创 vue-cli4-vw适配总结
ps已经很久没有发表博客了，最近一些知识点的整理已经上传到了githubalwaysBeReady项目，如果想查看最新知识点整理可以直接访问github项目地址,欢迎点击star，或者提issue补充内容，指正总结中的错误点等。参考资料移动端适配方案：基于flexible库的成熟方案和基于vw的新方案cssnanoautoprefixer一个很好的例子autoprefixer,这个转换通过删除陈旧的带有特定厂商前缀的属性从而修改了CSS语义。为了保证转换的安全，你的browserslist .
2021-02-01 16:40:23
556
1
原创 前端学习网站汇总
pageSwitch snap.svgechartsgallery antv力扣思否掘金flutter中文网npmbabelvue-clivue-loaderwebpackStylusgiteewebpack核心包腾讯团队前端stackoverflow阮一峰的网络日志苹果开发文档flutterv2excss-tricks微信开放平台Created ...
2020-03-12 17:11:24
383
原创 用一个div绘制背景流动网格特效
文章目录如何利用css绘制水平垂直直线组成网格如何利用css绘制水平垂直直线组成网格利用css3llinear-gradient、background-size原理剖析：利用css3渐变属性llinear-gradient来绘制横纵直线 .grid width 100vw height 100vh background-image -webkit-linear-gradi...
2019-12-26 11:39:01
1752
原创 VSCode编辑器使用相关
vscode如何将tab键设置为两格缩进首先打开Settings文件步骤：file->preferences->settings然后首先找到：Tab Size 将其修改为2然后修改Detect Indentation 因为vscode会自动检测Tab Size和Editor：Insert Spaces如果不修改其为false那么Tab Size的修改不会生效。具体操作如图所示：...
2019-12-23 16:00:26
214
原创 git 操作常见错误及解决方式---(实战性总结)
GitBash 配置到WebStorm中File–>settings–>Tools–>Terminal更改Shell Path中cmd.exe为sh.exe的路径注意：这里的路径是sh.exe的路径不是gitbash.exe的路径"C:\Program Files\Git\bin\sh.exe" --login -i解决git pull/git push 每次都...
2019-12-11 14:35:16
4643
1
原创 优秀的个人博客----持续更新中(期待补充)
精通内容 个人标签 相识网站 博客地址 前端 vue.js 思否博主(寻梦无痕) 个人博客 全栈 javaScript 思否博主(lx熊猫桑) 个人博客 前端 javaScript，css 掘金博主(心谭) 个人博客 全栈 前沿技术/科技爱好 --- 阮一峰老师的网络日志 ...
2019-11-18 10:45:39
340
原创 node.js+webpack项目安装简易流程,及遇到的小坑
文章目录安装过程使用`$ webpack entry.js bundle.js` 遇到错误打包运行安装过程1.首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。2.用 npm 安装 Webpack：这里我们使用的是将webpack安装到项目依赖中，这样就可以使用项目本地版本的 ...
2019-10-10 20:46:55
274
原创 前端知识点总结
前端知识点总结一.实用的BOM对象属性方法1.window对象主要的属性：2.window对象的主要方法：一.实用的BOM对象属性方法BOM（Browser Object Model）是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象提供了独立于内容的、可与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的window对象是BOM的顶层对象，其它...
2019-07-07 22:17:48
270
原创 Echarts 饼图，legend样式美化
最后样式图：实现代码：var myChart = echarts.init(document.getElementById('container')); let option = { /*{b}: {c} ({d}%*/ legend: { ...
2019-05-16 16:36:18
10059
原创 如何根据当前日期计算周一和周末，格式化当前日期
获取当前时间展示为05-08的形式，只有月日如果只有一位数就补0，两位正常显示 const myDate = new Date(); const today = myDate.toLocaleDateString().split('/').join('-'); let times = today.split('-'); const Year = times[0...
2019-05-08 16:25:11
607
原创 MongoDB查询方法总结
目录1.MongDB查询文档使用find()方法。2.除了find()方法之外，还有一个findOne()方法，它只返回一个文档。3.查询数据库表中的数据条数：db.col.count();4.常用的一些查询eg5.MongoDB 与 RDBMS Where 语句比较 6.MongoDB AND 条件 7.MongoDB OR 条件...
2019-05-08 14:17:10
2974
原创 JavaScript 之常忽略数组方法filter()
在开发过程中我们常常遇到，需要过滤数据的情况。好比我们从接口获取到的数据，不同的模块可能所需要的具体内容不同，又或者有4个tab，当我们点击其中一个对应的标题时，隐藏另外3个，这时我们很自然的想到的是根据不同的筛选条件重新请求接口，但是这样往往是耗费性能的。针对上边的问题，我们可以一次请求一个比较大的数据集，当我们具体显示页面中的某一部分时再进行筛选。在这里我将介绍，js数组操作filter...
2019-04-11 15:58:37
596
原创 项目技术研究-Cornerstone
Cornerstone是一个开源的项目，旨在提供完整的基于web的医学成像平台。此存储库包含Cornerstone Core组件，它是一个轻量级JavaScript库，用于在支持HTML5 canvas元素的现代web浏览器显示医学图像。Cornerstone Core本身并不是一个完整的应用程序，而是可以用作一个更完整的应用程序的组件的组件。Cornerstone Core与用于存储图像像素...
2018-11-22 10:37:53
395
原创 项目技术研究-meteor
meteor：meteor是一个用于开发现代web和移动应用程序的全栈javaScript平台。Meteor包含一组关键的技术，用于构建连接客户端响应式应用程序，构建工具以及Node.js和一般JavaScript社区的一组策划包。Metetor允许您在所有环境中使用一种语言JavaScript进行开发，应用程序服务器，Web浏览器和移动设备。Meteor使用线路上的数据，服务器发送...
2018-11-21 15:36:23
294
原创 项目技术研究Tesseract-MI
基于开源浏览器的医学成像人工智能部署平台Tesseract-MedicalImaging(Tesseract-MI)是一个基于web的平台，可以部署AI模型，同时提供标准的图像查看和报告方案。Tesseract-MI的目标是增强3D成像并在用户请求时候提供第四维AI。Tesseract包括图像查看器，DICOM服务器，报告UI和AI辅助指针，用于按需处理结果。github项目地址基础技...
2018-11-21 09:51:56
252
原创 d3-v5 力引导布局进阶，新增图例筛选功能
环境，数据，函数部分请参考 上一篇博客d3-V5 力引导布局实例图，这里仅绘图部分代码 // 新建一个力导向图 this.forceSimulation = d3.forceSimulation() .force('link', d3.forceLink().id(d => d.id)) .force('charge...
2018-11-09 11:28:39
1229
2
原创 d3-V5 力引导布局实例图
环境vue组件中 <template> <div> <svg width="960" height="600"></svg> </div></template><script>/* eslint-disable no-param-reassign
2018-11-03 16:46:24
3489
原创 利用d3.js绘制一个矩形图表
<template> <div> </div></template><script>import * as d3 from 'd3'export default { mounted(){ let width=400; let height=400; let svg=d3.select('di...
2018-10-31 15:57:40
1380
2
原创 D3.js比例尺的作用
比例尺是D3中一个很重要的概念，上一章里提到过直接用数值的大小来代表像素不是一种好的办法，这里正是要解决此问题。为什么需要比例尺？上一章制作了一个柱形图，当时有一个数组：var dataset = [ 250 , 210 , 170 , 130 , 90 ];绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。此方式非常具有局限性，如果数值过大或过小...
2018-10-30 15:45:30
480
原创 D3.js做一个简单的图表
环境：vue使用：npm install d3 --save-dev(检查是否安装成功在package.json查找d3)然后在组件中引入：import * as d3 from 'd3'柱形图是一种简单的可视化图表，主要有矩形，文字标签，坐标轴所组成。这里只绘制矩形部分，主要讲解如何使用d3在svg中绘图。画布是什么？HTML5提供两种强有力的"画布"，SVG和Canva...
2018-10-30 13:28:36
1105
原创 Echarts关系图graph应用
环境vue组件中<template> <div id="pic" style="width: 300px; height: 500px;"></div></template><script>export default { mounted() { // const categories = [];
2018-10-26 13:54:29
3749
原创 Webpack进阶第六节---插件(plugins)
插件(Plugins)是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。Loders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，Loders是在打包构建过程中用来处理源文件的(JSX,Scss,Less),一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用。Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成...
2018-10-24 14:27:05
264
原创 Webpack进阶第五节
一切皆模块Webpack有一个不可说的优点，它把所有的文件都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loders都可以被处理。CSSwebpack提供两个工具样式表，css-loader和style-loader，二者处理的任务不同，css-loader使你能够使用类似@import和url(……)的方法实现require()的功能。style-...
2018-10-24 13:35:46
205
原创 Webpack进阶第四节
Babel其实可以完全在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为‘.babelrc’的配置文件中。我们现在的babel的配置并不复杂，不过之后我们会加一些东西，因此我们现在就提取出相关部分，分两个配置文件进行配...
2018-10-24 10:31:20
200
原创 Webpack进阶第三节---loaders
loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的loaders可以把React中的JSX文件转换为JS文件。Loaders需要单独安装并且需要在webp...
2018-10-24 10:12:52
183
原创 Webpack进阶第二节----使用Webpack构建本地服务器
想不想让浏览器监听你代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖npm install --save-dev webpack-dev-server devserver作为webpack配置选项中的一项，...
2018-10-23 16:57:16
303
原创 Webpack进阶第一节
生成Source Maps(使调试更容易)开发总是离不开调试，方便的调试能极大的提高开发效率，不过有时候通过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置，Source Maps就是来帮我们解决这个问题的。通过简单的配置，webpack就可以在打包时为我们生成source-maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易测试。...
2018-10-23 16:30:15
165
原创 Webpack入门第三节
更快捷的执行打包任务！在命令行中输入命令类似node_modules\.bin\webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下：{ "name": "webpack-sample-p...
2018-10-23 15:45:56
134
原创 Webpack入门第二节
上一节已经成功使用Webpack打包了一个文件了。在终端进行复杂的命令行操作，其实是不太方便且容易出错的，接下来看看Webpack的另一种更常见的使用方法。通过配置文件来使用WebpackWebpack拥有很多其它的比较高级的功能(比如loaders和plugins)，这些功能都可以通过命令行模式实现，但是这样不太方便且容易出错，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的...
2018-10-23 14:16:13
174
原创 Webpack入门第一节
1.使用Webpack前需要做的准备在新项目文件夹中新创建package.json,这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务。(在终端可以使用npm init可以自动创建package.json)文件。输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重...
2018-10-22 17:37:03
170
原创 HTML&CSS- 浏览器渲染过程和原理
关键路径渲染 关键渲染路径（Critical Rendering Path）：是指与当前用户操作有关的内容。例如用户刚刚打开一个页面，首屏的显示就是当前用户操作相关的内容，具体操作就是浏览器收到HTML，CSS和JavaScript等资源等对其进行处理并渲染出Web页面。了解浏览器渲染的过程与原理，很大程度上是为了优化关键渲染路径，但优化应该是针对具体问题的解决方案，所以优化没有...
2018-09-29 16:05:12
1092
原创 HTML&CSS- 浏览器内核
浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解...
2018-09-29 13:09:26
414
原创 HTML&CSS- 对Web标准的理解（结构、表现、行为）
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。 对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。 ...
2018-09-29 11:25:57
4651
原创 前端学习资料链接保存
面试题：https://segmentfault.com/a/1190000016511190?share_user=1030000015623074https://segmentfault.com/a/1190000016504891前端面试之道书籍：https://yuchengkai.cn/docs/frontend/#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9...
2018-09-29 10:24:41
196
转载 JavaScript 深拷贝与浅拷贝的区别
JavaScript有两种数据类型，基础数据类型和引用数据类型。基础数据类型都是按值访问的，我们可以直接操作保存变量中的实际值，而引用类型如Array，我们不能直接操作对象的堆内存空间，引用类型的值都是按引用访问的，即保存在变量对象中的一个地址。 一.深拷贝和浅拷贝的区别浅拷贝(shallow copy)：只复制指向某个对象的指针，而不复制这个对象本身，新旧对象共享...
2018-09-01 20:40:41
213
原创 D3.js 初涉
D3.js是用来操作基于数据得文档得javascript库，D3能够帮助你使用html，css，和svg来呈现数据。D3重视web标准，同时给予你现代浏览器得所有功能，因此，你无需适用一个专有得框架，同时整合了强大得可视化部件和一个基于数据驱动得方法去操作DOM对象。D3允许你绑定任意的数据到一个DOM对象中，然后绑定一些数据驱动的事务在这个文档上，例如，你可以用d3从一个数组中生成html的...
2018-08-22 17:31:18
223
原创 Set数据结构
1.set基本用法：ES6提供了新的数据结构set。它类似于数组，但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。const s=new Set();[2,3,5,4,5,2,2].forEach(x=>s.add(x));for(let i of s){ console.log(i);}上面代码通过add方法向Set结构加入成员，结...
2018-07-16 15:09:39
1835
原创 vue.js组件篇
代码复用一直是软件开发中长期存在的一个问题，每个开发者都想再次使用之前写好的代码，又担心引入这段代码后会对现有程序产生影响。从jQuery开始我们就通过插件的形式复用代码，到Requirejs开始将js文件模块化，按需加载，这两种方法都提供了比较方便的复用，但往往还需要自己手动加入所需的css文件和html模块，现在web Components的出现提供了一种新的思路，可以自定义tag标签并拥有自...
2018-07-15 18:54:57
494
原创 vue组件间通信，通过事件向父组件发送消息
例子现在我们在每篇博文正文之前添加一个按钮来放大字号：子组件中写法：Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <button>...
2018-07-04 10:17:21
1431
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人