<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[przlovecsdn的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/przlovecsdn</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; przlovecsdn]]></copyright><item><title><![CDATA[自定义封装fetch]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/83277061</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/83277061</guid><author>przlovecsdn</author><pubDate>Mon, 22 Oct 2018 18:49:45 +0800</pubDate><description><![CDATA[
// import 'es5-shim' //由于 IE8 是 ES3，需要引入 ES5 的 polyfill
// require('es6-promise').polyfill(); //支持IE浏览器,引入 Promise 的 polyfill
// import 'whatwg-fetch' //解决移动浏览器兼容性问题
// import 'fetch-detector' //引入 f...]]></description><category></category></item><item><title><![CDATA[vue自定义指令v-load-more实现上拉加载]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82900062</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82900062</guid><author>przlovecsdn</author><pubDate>Sat, 29 Sep 2018 17:17:27 +0800</pubDate><description><![CDATA[vue通过自定义指令实现loadMore上拉加载，实现方法：

common.js


/**
 * 获取style样式
 */
export const getStyle = (element, attr, NumberMode = 'int') =&amp;gt; {
        let target;
        // scrollTop 获取方式不同，没有它不属于style，而且只有doc...]]></description><category></category></item><item><title><![CDATA[快速删除node_modules文件夹]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82762010</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82762010</guid><author>przlovecsdn</author><pubDate>Tue, 18 Sep 2018 18:21:35 +0800</pubDate><description><![CDATA[step1：

npm install rimraf -g

step2：

rimraf node_modules]]></description><category></category></item><item><title><![CDATA[vue通过DllPlugin插件优化打包性能，减少打包时间（基于vue-cli）]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82761912</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82761912</guid><author>przlovecsdn</author><pubDate>Tue, 18 Sep 2018 18:18:52 +0800</pubDate><description><![CDATA[step1：在build文件夹下新建 webpack.dll.conf.js 文件(即和webpack.base.conf.js同级)


const path = require('path')
const webpack = require('webpack');

module.exports = {

output: {
    filename: 'dll/[name].dll.js',...]]></description><category></category></item><item><title><![CDATA[vue打包通过image-webpack-loader插件对图片压缩优化]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82761606</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82761606</guid><author>przlovecsdn</author><pubDate>Tue, 18 Sep 2018 17:57:17 +0800</pubDate><description><![CDATA[vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

step1：npm install image-webpack-loader --save-dev

step2：在build/webpack.base.conf.js中改如下配置


module.exports = {

    module: {

  ...]]></description><category></category></item><item><title><![CDATA[react打包通过image-webpack-loader插件对图片压缩优化]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82761471</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82761471</guid><author>przlovecsdn</author><pubDate>Tue, 18 Sep 2018 17:52:06 +0800</pubDate><description><![CDATA[react正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

step1：npm install image-webpack-loader --save-dev

step2：在config/webpack.config.prod.js中改如下配置


module.exports = {
    module: {...]]></description><category></category></item><item><title><![CDATA[react通过react-router-dom拦截实现登录验证]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82258872</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82258872</guid><author>przlovecsdn</author><pubDate>Fri, 31 Aug 2018 17:20:56 +0800</pubDate><description><![CDATA[在使用react开发项目中，有些页面需要登录之后才能访问，所以需要进行拦截，此处分享采用react-router-dom v4+redux+redux-saga+ant-mobile+axios技术来实现

Login.jsx


import React from &quot;react&quot;;
import { is, fromJS } from &quot;immutable&quot;;
import { connect ...]]></description><category></category></item><item><title><![CDATA[vue通过vue-router拦截实现登录验证]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82258083</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82258083</guid><author>przlovecsdn</author><pubDate>Fri, 31 Aug 2018 16:40:21 +0800</pubDate><description><![CDATA[在实际开发中，有些页面需要登录之后才能访问，采用vue-router+vuex+elememt-ui+axios的方式实现。

以下是案列代码：

login.vue


&amp;lt;template&amp;gt;
  &amp;lt;div class=&quot;login&quot;&amp;gt;
    &amp;lt;el-input type=&quot;text&quot; v-model=&quot;username&quot; placeholder=&quot;请输入用户名&qu]]></description><category></category></item><item><title><![CDATA[vue调试工具Devtools不出现的解决方式]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82256558</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82256558</guid><author>przlovecsdn</author><pubDate>Fri, 31 Aug 2018 15:19:38 +0800</pubDate><description><![CDATA[在使用vuex时，想直观的查看数据state的变动，用Devtools可实现，但是在Google浏览器中开发调试的时候，右上角出现vue的图标，但是在开发者工具中没有出现vue调试（已在扩展程序中安装 Vue Devtools）

vue图标：



开发者工具：



扩展程序：



没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选：允许访问文件网址


https:...]]></description><category></category></item><item><title><![CDATA[H5调取摄像头摄像上传的两种方式]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82256413</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82256413</guid><author>przlovecsdn</author><pubDate>Fri, 31 Aug 2018 14:59:25 +0800</pubDate><description><![CDATA[
&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;

&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;
    &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&amp;gt;
    &amp;lt;title&amp;gt;H5 Upload&am]]></description><category></category></item><item><title><![CDATA[H5实现拍照上传功能]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/82224183</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/82224183</guid><author>przlovecsdn</author><pubDate>Thu, 30 Aug 2018 16:52:25 +0800</pubDate><description><![CDATA[
&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;

&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;
    &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&amp;gt;
    &amp;lt;title&amp;gt;H5 Upload&am]]></description><category></category></item><item><title><![CDATA[react使用react-hot-loader实现局部热更新]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/81741102</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/81741102</guid><author>przlovecsdn</author><pubDate>Thu, 16 Aug 2018 14:34:36 +0800</pubDate><description><![CDATA[Q：webpack-dev-server 已经是热加载，为何还要在 react 项目还要安装 react-hot-loader 呢？

A：其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack ...]]></description><category></category></item><item><title><![CDATA[react中使用ant-design步骤]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740994</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740994</guid><author>przlovecsdn</author><pubDate>Thu, 16 Aug 2018 14:29:39 +0800</pubDate><description><![CDATA[
step1、 npm install antd --save

step2、npm install babel-plugin-import --save-dev

step3、分别在config/webpack.config.dev.js、config/webpack.config.prod.js中配置

https://github.com/ant-design/babel-plugin-im...]]></description><category></category></item><item><title><![CDATA[react-router v4传递参数]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740791</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740791</guid><author>przlovecsdn</author><pubDate>Thu, 16 Aug 2018 14:23:40 +0800</pubDate><description><![CDATA[注意：  路由表改变后要重启服务  

   方式 一：

         通过params

        1.路由表中      

              &amp;lt;Route path=' /user/:id '   component={User}&amp;gt;&amp;lt;/Route&amp;gt;

　　　　　　　　　　　

        2.Link处        

          ...]]></description><category></category></item><item><title><![CDATA[react打包放在服务器上出现空白页(即文件路径不对问题)]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740727</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740727</guid><author>przlovecsdn</author><pubDate>Thu, 16 Aug 2018 14:20:28 +0800</pubDate><description><![CDATA[解决方式：

https://stackoverflow.com/questions/38565538/create-react-app-css-and-js-path/

在package.json中添加--- &quot;homepage&quot; :&quot;.&quot;,

或是直接添加文件路径，例如：&quot;homepage&quot;:&quot;http://example.com/react&quot;


{
    &quot;name&quot;: &quot;react-.]]></description><category></category></item><item><title><![CDATA[react引入照片的几种方式]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740651</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740651</guid><author>przlovecsdn</author><pubDate>Thu, 16 Aug 2018 14:18:51 +0800</pubDate><description><![CDATA[//引入方式一：import tsIcon from '../images/typescript.jpeg';

//引入方式二：const tsIcon = require('../images/typescript.jpeg');

//使用方式一：&amp;lt;img src={tsIcon} alt=&quot;&quot; /&amp;gt;、&amp;lt;img src={require('../images/typescr...]]></description><category></category></item><item><title><![CDATA[通过create-react-app创建的react项目使用sass]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740592</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740592</guid><author>przlovecsdn</author><pubDate>Thu, 16 Aug 2018 14:15:39 +0800</pubDate><description><![CDATA[
step1:安装sass
npm install sass-loader node-sass --save-dev
step2:配置sass
    1、找到webpack.config.dev.js和webpack.config.prod.js
    2、分别修改test: /\.css$/改为test: /\.(css|scss)$/，并且在use:[]中添加即use:[...,...,{...]]></description><category></category></item><item><title><![CDATA[React中配置跨域]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740498</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740498</guid><author>przlovecsdn</author><pubDate>Thu, 16 Aug 2018 14:11:56 +0800</pubDate><description><![CDATA[在package.json中配置代码可以实现跨域

1、确保你自己已经使用 npm run eject 命令，这个是生成本地webpack配置文件

2、package.json中配置如下代码


&quot;proxy&quot;: {
    &quot;/*&quot;: {
        &quot;secure&quot;: false,//若是https可以添加，也可以不添加，不添加也行
        &quot;target&quot;: &quot;https://...]]></description><category></category></item><item><title><![CDATA[相邻div元素层设置margin引起的层级问题解决方案]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740313</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740313</guid><author>przlovecsdn</author><pubDate>Thu, 16 Aug 2018 14:04:12 +0800</pubDate><description><![CDATA[需求：up和down层，down层margin-top:-100px;

目的：down层覆盖up层100px

&amp;lt;div class=&quot;up&quot;&amp;gt;&amp;lt;/div&amp;gt;

&amp;lt;div class=&quot;down&quot;&amp;gt;&amp;lt;/div&amp;gt;

出现问题：up层覆盖down层上100px，而不是隐藏在down层下；

解决方案：

方案一：.up{

   position: re...]]></description><category></category></item><item><title><![CDATA[利用伪元素设置元素是否选中状态]]></title><link>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740243</link><guid>https://blog.youkuaiyun.com/przlovecsdn/article/details/81740243</guid><author>przlovecsdn</author><pubDate>Thu, 16 Aug 2018 13:57:20 +0800</pubDate><description><![CDATA[


li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: .36rem;
    height: .36rem;
    margin-top: -.18rem;
    border-radius: .36rem;
    border: .01rem solid ...]]></description><category></category></item></channel></rss>