官网:react
全局安装
npm i -g create-react-app
创建项目
npx create-react-app my-app
dom事件控制路由跳转
npm i create-router-dom --save-dev
sass安装配置
npm i sass-loader node-sass --save-dev
sass全局变量 预加载
npm i sass-resources-loader -D
打开配置项(如果报错 )
先执行
git add .
git commit -m 'init'
在执行
npm run eject
找到config/webpack.config.js
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'sass-loader'
).concat({
loader:'sass-resources-loader',
options:{
resources:[
path.resolve(__dirname,'../src/styles/index.scss')
]
}
}),
sideEffects: true,
},
代理服务器--跨域
npm install http-proxy-middleware -S
在src下新建文件setupproxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use('/api', createProxyMiddleware({
target: 'http://localhost:3000',
changeOrigin: true,
}));
app.use('/api2', createProxyMiddleware({
target: 'http://xxx.com',
changeOrigin: true,
pathRewrite: { //路径替换
'^/api2': '/api', // axios 访问/api2 == target + /api
}
}));
};
安装axios
npm install axios -S
在src下新建utils/request.js 拦截器
import axios from 'axios'
const service= axios.create({
baseURL: '',
timeout: 5000,
});
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service;
配置绝对路径两种方法
1.在根目录下面创建一个jsconfig.json文件(是根目录 而非src 相当于是和src同级的,添加完成后 一定要记得重新启动项目 这就相当于修改了配置文件 不重启会报错的)
{
"compilerOptions":{
"baseUrl":"src"
},
"include":["src"]
}
2. 找到config/webpack.config.js 在alias下面添加如下代码
alias: {
'@': path.resolve('src')
}
在src下新建api/user.js 封装请求
import request from 'utils/request'
export function Login(data) {
return request({
url: '/login/',
method: 'post',
data
})
}