spcming-CSDN博客

原创 react中webpack配置

webpack使用前的基础知识webpack使用版本：3.10.0需要处理文件类型Html：html-webpack-plugin脚本：babel + babel-preset-react样式：css-loader + sass-loader图片/字体：url-loader + file-loaderwebpack常用模块html-webpack-plugin，html单独打包成文件extract-text-webpack-plugin，样式打包成单独文件CommonsChunkP

2020-10-21 23:10:00 610 1

原创在react中引使用Simditor富文本编辑器

simditor是一个依赖于JQuery富文本编辑器的模块，需要先安装jQuery之后再引入到项目中使用使用方法使用npm install simditor@2.3.6 或者yarn add simditor@2.3.6 这里推荐安装2.3.6版本，笔者在使用的时候安装最新版本会在运行时报错（如果在您的项目中没有报错可以直接安装最新版本）新建一个富文本编辑器的通用模块放入以下代码import React, { Component } from 'react'import Simditor

2020-10-07 12:22:50 341

原创 React图片上传组件react-fileupload的使用方法

react-fileupload的安装使用npm install react-fileupload --save 或 yarn react-fileupload 安装均可使用方法若在开发时用的是react@15.x的版本，直接引入一下代码即可使用const FileUpload = require('react-fileupload');...render(){ /*set properties*/ const options={ baseUrl:'http://127.0.0.1',

2020-10-04 10:53:28 2968 1

原创利用webpack解决跨域请求问题

在webpack中为我们提供了劫持的方法，需要在webpack.config.js中的devServer中添加proxy属性proxy属性proxy在webpack中的配置如下所示devServer: { port:8086, historyApiFallback:{ index: '/dist/index.html' }, proxy:{ '/manage' :{ target: 'http://xxxx.com',

2020-09-27 16:20:41 471

原创 react-router-dom中NavLink用法

在react-router-dom中为我们提供了一个NavLink的组件，组建中含有一个名为activeClassName的属性，可以很方便的为我们提供路由切换时的选中效果NavLink使用NavLink时，其用法与Link无太大区别，在需要实现点击切换className时，可以用NavLink代替Link简化操作，并将需要点击后激活的ClassName值放到NavLink标签的activeClassName中即可，比如下方代码中让 li 标签点击后激活active-menu的class值 <

2020-09-27 09:48:01 1976

原创修改浏览器中滚动条样式的API

css/*修改滚动条样式*/div::-webkit-scrollbar{ width:10px; height:10px; /**/}div::-webkit-scrollbar-track{ background: rgb(239, 239, 239); border-radius:2px;}div::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius:10px;}div::-webkit-s

2020-09-26 16:24:37 201

原创解决React中使用相对目录不方便改变目录文件的问题

在React中使用相对目录引入模块后，如果在后期想要重新调整目录文件将十分复杂，这时候我们可以在webpack的配置文件中为一些共有的目录设定别名，这样在修改文件目录的时候只需要修改webpack配置文件即可如何添加目录的别名在webpack.config.js中添加resolve模块，在模块中为一个路径起一个别名 resolve: { alias: { page: path.resolve(__dirname,'src/page') // page是起的别名，后面是

2020-09-25 08:33:47 375

原创 Switch---实现对于React-Router中同一个组件不同参数的处理

Switch组件实现了在同一个组件中面对不同参数进行不同形式的展现Switch的具体用法在需要进行传入不同参数的组件中添加Switch组件（如下面代码中的A组件），它实现了在组件中使用Route，让React-Router的使用更加灵活，在Switch中Route的匹配规则是从上到下匹配，当匹配到一个符合的路由时停止匹配，返回第一个匹配的Routeimport React, { Component } from 'react'import ReactDOM from 'react-dom'imp

2020-09-24 13:39:37 571

原创 font-awesome使用方法

安装font-awesome，由于font-awesome没有什么依赖，所以安装最新版本即可yarn add font-awesome在webpack.config.js中进行如下配置const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin')const ExtractTextPlugin = require('extract-text-webpack-plugin')mod.

2020-09-23 19:37:04 1714

原创解决安装旧版本babel/perset-env时，按照官网配置会报错的问题

在安装旧版本babel的时候，按照官方进行如下配置后，会报出Module build failed: Error: Couldn’t find preset “@babel/preset-env” relative to directory的错误module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-l

2020-09-23 17:44:01 995

spcming的博客