cag2050 - 博客园

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 阅读(2184) 评论(0) 推荐(1) 编辑

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

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

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

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

posted @ 2018-06-12 17:38 cag2050 阅读(403) 评论(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 阅读(192) 评论(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 阅读(938) 评论(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 阅读(409) 评论(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 阅读(327) 评论(0) 推荐(0) 编辑

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

posted @ 2018-05-18 10:12 cag2050 阅读(433) 评论(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 阅读(2365) 评论(0) 推荐(1) 编辑

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

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

posted @ 2018-05-17 19:47 cag2050 阅读(1283) 评论(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 阅读(177) 评论(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 阅读(214) 评论(0) 推荐(0) 编辑

highcharts 知识点

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

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

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

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

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

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

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

posted @ 2018-04-23 11:15 cag2050 阅读(431) 评论(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 阅读(1080) 评论(0) 推荐(0) 编辑

antd 知识点

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

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

webpack 图片没打包成功

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

posted @ 2018-04-18 20:57 cag2050 阅读(337) 评论(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 阅读(191) 评论(0) 推荐(0) 编辑

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

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

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

React 使用 PropTypes 进行类型检查

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

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

react 知识点2

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

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

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

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

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

vue监听路由变化

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

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

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

摘要：代码：阅读全文

posted @ 2018-04-12 16:59 cag2050 阅读(448) 评论(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 阅读(429) 评论(0) 推荐(0) 编辑

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

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

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

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

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

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

xlsx 库知识点

摘要：官方github地址：https://github.com/SheetJS/js xlsx xlsx 用webpack打包后体积太大： vue cli构建的项目，优化办法：https://segmentfault.com/a/1190000014284449 阅读全文

posted @ 2018-04-10 14:33 cag2050 阅读(514) 评论(0) 推荐(0) 编辑

eslint 知识点

摘要： ESlint和webpack集成，在babel编译代码开始前，进行代码规范检测。 eslint的配置方式。比较多元化： js注释 .eslintrc. 文件 package.json里面配置eslintConfig字段阅读全文

posted @ 2018-04-10 09:48 cag2050 阅读(155) 评论(0) 推荐(0) 编辑

bootstrap-table设置表头宽度无效的解决方案

摘要： bootstrap table设置colmuns中某列的宽度无效时，需要给整个表设置css属性: 阅读全文

posted @ 2018-04-08 16:56 cag2050 阅读(682) 评论(0) 推荐(0) 编辑

create-react-app：reject和不reject(使用react-app-rewired)这2种情况下的antd组件按需引入配置

摘要： create react app：eject和不eject(使用react app rewired)这2种情况下的antd组件按需引入配置：不eject(使用react app rewired)配置：详细说明：https://ant.design/docs/react/use with crea 阅读全文

posted @ 2018-04-04 16:11 cag2050 阅读(5525) 评论(0) 推荐(0) 编辑

高阶组件知识点，什么是高阶组件？

摘要：比较好的介绍文章：标题 | 链接地址 | 深入浅出React高阶组件 | https://segmentfault.com/a/1190000010371752 带着三个问题深入浅出React高阶组件 | https://juejin.im/post/59818a485188255694568ff 阅读全文

posted @ 2018-04-04 10:11 cag2050 阅读(2390) 评论(0) 推荐(0) 编辑

react-router 从 v3 版本升到 v4 版本，升级小记

摘要： react router v4 跟 react 一样拆成了两部分，核心的 react router 和依运行环境而定的 react router dom 或 react router native（跟 react dom 和 react native 一样）。本文要说的是浏览器环境，也就是 reac 阅读全文

posted @ 2018-04-04 10:08 cag2050 阅读(217) 评论(0) 推荐(0) 编辑

react 实现路由按需加载

摘要： import() 方法： 1. async.js 文件内容： 2. 使用：项目地址：https://github.com/cag2050/react_antd_demo 阅读全文

posted @ 2018-04-03 18:55 cag2050 阅读(474) 评论(0) 推荐(0) 编辑

vue-router 与 react-router 设计理念上的区别

posted @ 2018-04-02 21:15 cag2050 阅读(1422) 评论(0) 推荐(0) 编辑

create-react-app 知识点

摘要：用 create react app 创建项目时，最好FQ；否则有些安装包会安装不上，报超时错误。 create react app 创建的项目，执行后，按需引入antd的2种方式：出处：https://blog.csdn.net/well2049/article/details/7880122 阅读全文

posted @ 2018-04-01 00:48 cag2050 阅读(287) 评论(0) 推荐(0) 编辑

ElementUI（vue UI库）、iView（vue UI库）、ant design（react UI库）中组件的区别

posted @ 2018-04-01 00:24 cag2050 阅读(10407) 评论(0) 推荐(0) 编辑

create-react-app 搭建的项目中，让 antd 通过侧边栏导航 Menu 的 Menu.Item 控制 Content 部分的变化

摘要：第一种：BrowserRouter把Menu和Route组给一起包起来 1. `` 标签要把Menu和Route组给一起包起来修改src/index.js文件，相应内容如下： 2. Menu.Item 部分： 3. Route 部分自己做的例子：https://github.com/cag205 阅读全文

posted @ 2018-03-31 17:34 cag2050 阅读(9895) 评论(1) 推荐(1) 编辑

react-router v4.0 知识点

摘要： react router 提供了一个withRouter组件 withRouter可以包装任何自定义组件，将react router 的 history,location,match 三个对象传入。介绍文章：https://blog.csdn.net/ISaiSai/article/details 阅读全文

posted @ 2018-03-31 16:31 cag2050 阅读(143) 评论(0) 推荐(0) 编辑