npm root -g 查看全局的下载根目录在哪里 有没有安装过create-react-app
前端开发主流框架之react项目搭建
1、第一步
全局安装react
执行 npm install -g create-react-app
2、第二步
创建 项目
执行：create-react-app my-app
3、第三步 安装路由控件
执行：npm install react-router-dom --save （--save）安装到本地
4、第四部 安装 axios less-lodar
(axios )调用接口（less-lodar）把less转换为css 转换识别和转化处理
执行npm install axios less-loader --save
5、第五部 暴露webpack等文件配置
运行：npm run eject生成配置文件
（如果报错Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE。。。。 ）请参考（https://blog.csdn.net/weixin_41606276/article/details/85123919）
6、第六部 第五步安装成功后生成config文件 在webpack.config.js中配置 less 语法
首先定义俩个 常量
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
在module下的rules 配置以下 位置要放在 test: cssModuleRegex,的上边 不然 不会生效
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction ?shouldUseSourceMap:isEnvDevelopment,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction ?shouldUseSourceMap:isEnvDevelopment,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'),
},
7、第七部:安装阿里UI库antd
执行 yanr add antd (npm install antd --save ) 是翻墙下载 所有 建议用 yanr add antd
8、第八步:antd 按需加载 下载babel-plugin-import
执行：yarn add babel-plugin-import
9、第九步：antd在webpack 配置按需加载
module.rules.oneOf.options.plugins:配置
[
'import',
{libraryName:'antd',style:'css'}
]
10、第十步：安装jquery
执行：方法一：npm install jquery --save （组件使用import $ from 'jquery'）
方法二：也可以在index.html引入jquery库 使用前必须加windos.例如 windos.$
11、第十一步 路由配置 入口文件引入 import { HashRouter,Route,Switch} from 'react-router-dom'
import React from 'react';
import { HashRouter,Route,Switch} from 'react-router-dom'
// import APP from '../App.jsx'
import Login from '../component/login/login.jsx'
import Home from '../component/home/home.jsx'
import TaskAgentsTaskAgents from '../component/Ceshi/Ceshi.jsx'
import Num404 from '../component/num404/num404.jsx'
export default class router extends React.Component {
render() {
return (
<HashRouter>
<Route exact path="/" component={Login}/>
<Route path="/home"
render={()=>
<Home>
<Route path="/home/TaskAgentsTaskAgents" component={TaskAgentsTaskAgents}></Route>
<Route component={Num404}></Route>
</Home>
}
/>
</HashRouter>
);
}
exact ：这个是精准匹配 切记 如果有子路由 不能 加这个属性 因为是精准匹配 所有子路由配置 不会生效
其次 react-router-dom 4.0版本 可以基于dom重点是dom包裹所以 封装 可以这么写
<HashRouter>
<Route exact path="/" component={Login}/>
<Route path="/home"
render={()=>
<Home>
<Homerouter/>//这个是引入封装后的组件 效果和上面一样
</Home>
}
/>
</HashRouter>
12、如果遇到反向代理前端本地配置
在 package.json 中配置 { "proxy": "XXXXXXXX"}
13、IE11兼容：执行yarn add react-app-polyfill
在src/index.js的最顶部引入
import ‘react-app-polyfill/ie11’;
import ‘react-app-polyfill/stable’;
在packge.json文件下 browserlist 添加ie11
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
},
以后步骤基本架构完成 后续会更新路由配置
ES6创建组件方法export default class login extends React.Component{}
(注意:index.html 引入其他JS库中 获取方法前面必须申明windos 例如 windos.$(‘a’) 把所有的配置(就是你所引用的JS文件)文件需要在Build中配置一份目前还没有找到自动化打包配置文件的方法)