cag2050 - 博客园

页面可视化搭建整理

摘要：页面可视化搭建工具前生今世：https://github.com/CntChen/cntchen.github.io/issues/15 前端服务化——页面搭建工具的死与生：https://www.cnblogs.com/sskyy/p/6496287.html esview 项目实现原理：如何实阅读全文

posted @ 2018-07-12 15:00 cag2050 阅读(4812) 评论(0) 推荐(0)

单页面应用（SPA）重新部署后，正在浏览的页面如何更新缓存？

摘要：当单页面的系统在重新部署更新时，此时正在浏览网页，并且已经在网页内的用户，始终会使用老的js与css文件，一直在使用已经缓存了的静态资源。所有的缓存问题焦点都在index.html上，只要index.html刷新即可重新获取代码。出处：https://www.cnblogs.com/mamimi 阅读全文

posted @ 2018-07-11 13:16 cag2050 阅读(3871) 评论(2) 推荐(0)

vim 使用

摘要： vim 快捷键：快捷键 | 说明 | 符号：$ | 移动到行尾数字：0 | 移动到行首阅读全文

posted @ 2018-07-11 11:17 cag2050 阅读(145) 评论(0) 推荐(0)

浏览器缓存知识点

摘要：一篇比较好的介绍文章：http://www.netkiller.cn/journal/cache.html 阅读全文

posted @ 2018-07-11 10:10 cag2050 阅读(133) 评论(0) 推荐(0)

http 2.0 新特性

摘要： http 2.0 新特性：二进制分帧首部压缩流量控制多路复用请求优先级服务器推送出处：https://juejin.im/post/5a4dfb2ef265da43305ee2d0 阅读全文

posted @ 2018-07-08 16:14 cag2050 阅读(721) 评论(0) 推荐(0)

GoJS 在 vue 项目中的使用

摘要： GoJS 在 html vue 项目中的使用，github地址：https://github.com/cag2050/gojs_demo GoJS 在 vue cli 2.x 项目中的使用，github地址：https://github.com/cag2050/vue_cli_2_gojs_demo 阅读全文

posted @ 2018-07-05 09:47 cag2050 阅读(2187) 评论(0) 推荐(0)

详解Vue中watch的高级用法

摘要：出处：https://www.sohu.com/a/230309191_201105 阅读全文

posted @ 2018-06-29 18:46 cag2050 阅读(132) 评论(0) 推荐(0)

什么是 PWA?

摘要：出处：https://segmentfault.com/a/1190000012353473 阅读全文

posted @ 2018-06-21 18:28 cag2050 阅读(225) 评论(0) 推荐(0)

代码风格统一工具：EditorConfig 和静态代码检查工具：ESLint

摘要： EditorConfig 最常见的用途是：统一文件的编码字符集以及缩进风格使用 Eslint 做代码 lint，那么为什么还要使用 .editorconfig 呢？细细想了下，应该有两个方面吧。 1. Eslint 确实包含 .editorconfig 中的一些属性，如缩进等，但并不全部包含，如阅读全文

posted @ 2018-06-21 17:58 cag2050 阅读(1008) 评论(0) 推荐(0)

vue-cli 3.x 使用

摘要： vue cli 3.x 安装： vue cli 3.x 常用命令 vue cli 3.x 常用命令 | 命令含义 | vue help | vue cli 3.x 不像 create react app 或是 angular cli 生成的的项目一样去 eject 配置，通过在项目下设置 vue.c 阅读全文

posted @ 2018-06-19 14:31 cag2050 阅读(512) 评论(0) 推荐(0)

nginx 学习资料

摘要： nginx 学习资料 table th:first of type { width: 90px; } table th:nth of type(2) { } table th:nth of type(3) { width: 400px; } 知识 | 链接网址 | 说明 | | nginx | ht 阅读全文

posted @ 2018-06-17 19:38 cag2050 阅读(189) 评论(0) 推荐(0)

create-react-app 搭建的项目中，引入 webpack-bundle-analyzer 打包分析

摘要： 1. 安装 1. 在 config/webpack.config.prod.js 文件（推荐）或 config/webpack.config.dev.js 中，添加 1. 运行（推荐，这样只在打包时，打开分析网页；这个地方具体命令名，可在 package.json 文件中 scripts 部分修改阅读全文

posted @ 2018-06-14 18:07 cag2050 阅读(1939) 评论(0) 推荐(0)

vue-cli、create-react-app 项目如何查看打包分析？

摘要： vue cli、create react app 项目如何查看打包分析？项目 | 如何查看打包分析 | vue cli 创建的项目 | 已经集成 webpack bundle analyzer，运行 create react app 创建的项目 | 官方推荐使用 source map explor 阅读全文

posted @ 2018-06-14 16:56 cag2050 阅读(2192) 评论(0) 推荐(1)

vue-cli 创建的项目，在 nginx 上配置启用浏览器缓存

摘要： nginx 配置，关键参数：详见地址：https://github.com/cag2050/vue_cli_nginx 阅读全文

posted @ 2018-06-14 10:05 cag2050 阅读(420) 评论(0) 推荐(0)

vue-cli 项目优化之3种方法对比：本地静态库资源（推荐）、cdn、DllPlugin

posted @ 2018-06-12 17:38 cag2050 阅读(412) 评论(0) 推荐(0)

vue线上项目，优化前后对比

摘要：优化前： dev初次时间：52s dev时间：5s~6s build时间：374s（6.2分钟） build后zip包大小： vue、vue router 优化后： dev初次时间：49s、48s、50s、54s、56s、69s、50s、、、、、、、 dev时间：5s、6.7s、4.7s、5.3s、阅读全文

posted @ 2018-06-11 14:14 cag2050 阅读(204) 评论(0) 推荐(0)

vue-cli 2.x 项目优化之：引入本地静态库文件

摘要： demo地址：https://github.com/cag2050/vue_cli_optimize_static_resource vue cli 将静态资源文件放到 static 文件夹下并引用： 1. 将 node_modules 下相应的 xxx.min.js，复制到项目 static 文件阅读全文

posted @ 2018-06-04 19:01 cag2050 阅读(948) 评论(0) 推荐(0)

关联本地文件夹到 GitLab 项目

摘要：关联本地文件夹到 GitLab 项目的 dev 分支： 1. rm rf .git 1. git init 1. git remote add origin 1. git pull 1. git checkout dev 1. git add . 1. git commit m 'm' 1. git 阅读全文

posted @ 2018-06-01 11:44 cag2050 阅读(419) 评论(0) 推荐(0)

react 子组件访问父组件的方法

摘要： 1. 回调函数（推荐）地址：https://ourcodeworld.com/articles/read/409/how to update parent state from child component in react 1. 获得父组件的实例（不推荐）地址：https://stackov 阅读全文

posted @ 2018-05-21 17:58 cag2050 阅读(336) 评论(0) 推荐(0)

vue 和 react 组件间通信方法对比

posted @ 2018-05-18 10:12 cag2050 阅读(446) 评论(0) 推荐(0)

mobx-state-tree 知识点

摘要：中文教程：https://github.com/chenxiaochun/mobx state tree 比较好的介绍文章：https://tech.youzan.com/mobx_vs_redux/ mobx 和 mobx state tree 的区别： MobX 类库本身实现的是 Observa 阅读全文

posted @ 2018-05-17 20:12 cag2050 阅读(2396) 评论(0) 推荐(1)

vue 下实现 echarts 全国到省份的地图下钻

摘要： vue 下实现 echarts 全国到省份的地图下钻项目地址：https://github.com/cag2050/vue_echarts_v3_demo 阅读全文

posted @ 2018-05-17 19:47 cag2050 阅读(1295) 评论(0) 推荐(0)

TweenMax 动画库，知识点

摘要：官方地址：https://greensock.com/tweenmax github 地址：https://github.com/greensock/GreenSock JS 比较好的介绍文章： https://segmentfault.com/a/1190000005366176 http://s 阅读全文

posted @ 2018-05-14 17:28 cag2050 阅读(182) 评论(0) 推荐(0)

mobx 知识点

摘要： antd+mobx 项目例子：https://github.com/cag2050/antd_mobx_demo 在 create react app 创建的项目中，使用 mobx：https://swizec.com/blog/mobx with create react app/swizec/7 阅读全文

posted @ 2018-05-14 00:42 cag2050 阅读(228) 评论(0) 推荐(0)

highcharts 知识点

摘要：去掉版权：阅读全文

posted @ 2018-05-07 18:26 cag2050 阅读(142) 评论(0) 推荐(0)

dependencies、devDependencies、webpack打包的区别与联系

摘要：为什么要在dependencies、devDependencies中声明依赖？答：保证任何人在（或者你自己在其他设备上）对这个项目进行修改（开发）时，通过npm install就能获取同样的开发环境。 dependencies、devDependencies 的区别？与webpack打包的联系？阅读全文

posted @ 2018-04-26 12:19 cag2050 阅读(4475) 评论(0) 推荐(0)

react-router v4 实现路由拦截的一种思路（待验证）

摘要：出处：https://segmentfault.com/q/1010000010905474 阅读全文

posted @ 2018-04-23 11:15 cag2050 阅读(442) 评论(0) 推荐(0)

create-react-app 搭建的项目中，使用 stylus

摘要：相关介绍文章： 1. react学习系列1 修改create react app配置支持stylus：https://www.jianshu.com/p/9cd7a0dff11f 1. 在react中使用stylus loader：https://z 950.github.io/2018/04/03 阅读全文

posted @ 2018-04-20 11:08 cag2050 阅读(1094) 评论(0) 推荐(0)

antd 知识点

摘要：表格实现：不管多少列，为列指定一个宽度，让表格在容器里可左右拖动例子文件地址：https://github.com/cag2050/antd_mobx_demo/blob/master/src/components/tableDemo/TableDemo.js 上传组件的上传文件列表，无法通过程序阅读全文

posted @ 2018-04-20 10:15 cag2050 阅读(179) 评论(0) 推荐(0)

webpack 图片没打包成功

摘要： webpack 图片打包： 1. 直接src引用的，webpack不会进行打包 2. 作为背景图片的，打包成功了解决（react 写法）： 1、import 方法（推荐）： 2、require 方法：本地文件阅读全文

posted @ 2018-04-18 20:57 cag2050 阅读(344) 评论(0) 推荐(0)

toString() 和 toLocaleString() 的区别

摘要： toString() 和 toLocaleString() 的区别 table th:nth of type(4) { width: 400px; } 区别项 | toString() | toLocaleString() | 结论 | | | new Date() 调用 | Tue Apr 17 阅读全文

posted @ 2018-04-17 12:24 cag2050 阅读(200) 评论(0) 推荐(0)

使用 localeCompare 函数对中文进行排序

摘要： localeCompare 函数可对中文进行排序。性能相关当比较大量字符串时，比如比较大量数组时，最好创建一个Intl.Collator 对象并使用compare 属性所提供的函数。 mdn介绍：https://developer.mozilla.org/zh CN/docs/Web/Jav 阅读全文

posted @ 2018-04-17 12:22 cag2050 阅读(742) 评论(0) 推荐(0)

React 使用 PropTypes 进行类型检查

摘要：注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop types 库代替。 defaultProps 用来确保 this.props.name 在父组件没有特别指定的情况下，有一个初始值。类型检查发生在 defaultProps 赋值之后，所以类型检查也会应阅读全文

posted @ 2018-04-16 15:06 cag2050 阅读(707) 评论(0) 推荐(0)

react 知识点2

摘要：从 render 函数可以看出来，组件内部是通过 this.props 的方式获取到组件的参数的，如果 this.props 里面有需要的属性我们就采用相应的属性，没有的话就用默认的属性。那么怎么把 props 传进去呢？在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为 pr 阅读全文

posted @ 2018-04-13 17:42 cag2050 阅读(105) 评论(0) 推荐(0)

SPA项目中，404页面和登陆页面对应的路由，应该怎样控制？

摘要： SPA项目中，404页面和登陆页面对应的路由，应该怎样控制？可以这样做: 1. 登陆之前，所有页面跳到登陆页面；包括随便输入的路由地址。 2. 登陆后，跳到相应页面；随便输入的、不存在的路由地址，才跳到404页面。 react项目代码示例： 1. 路由是login或其他： https:// 阅读全文

posted @ 2018-04-13 17:02 cag2050 阅读(276) 评论(0) 推荐(0)

vue监听路由变化

摘要：使用 watch，观察路由，一旦发生变化便重新获取数据阅读全文

posted @ 2018-04-13 12:04 cag2050 阅读(188) 评论(0) 推荐(0)

js 去掉前后空格（正则表达式方法）

摘要：代码：阅读全文

posted @ 2018-04-12 16:59 cag2050 阅读(458) 评论(0) 推荐(0)

react：路由登陆后才能访问的控制

摘要： react router 通过创建一个需要认证的路由来限制登陆后才能访问。官方例子：https://reacttraining.com/react router/web/example/auth workflow 我自己做的例子：https://github.com/cag2050/react 阅读全文

posted @ 2018-04-12 16:19 cag2050 阅读(433) 评论(0) 推荐(0)

高阶组件 Higher-order Components (HOC) 知识点

摘要：官方介绍地址：https://reactjs.org/docs/higher order components.html 阅读全文

posted @ 2018-04-12 15:50 cag2050 阅读(163) 评论(0) 推荐(0)

antd、react-router-dom v4 解决菜单和地址同步问题

摘要：点击不同的菜单，右边内容做相应的变化。不过，对于后退操作和刷新页面操作无效，左边菜单无法保持选中项高亮。解决思路如下：Ｍenu 用 seletedKeys 来决定哪项被选中。需要判断当前选前的路由是什么，可以借助 withRouter。参考：https://zhuanlan.zhihu.co 阅读全文

posted @ 2018-04-11 18:00 cag2050 阅读(2293) 评论(0) 推荐(0)

导航

公告