npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
插件集合-------------------
1.react-router-dom路由
2.axios
3.js-cookie
4.redux、react-redux状态管理
npm run eject 弹出配置文件--不可逆操作--用于修改默认的配置
引入 react-app-rewired 并修改 package.json 里的启动配置:
npm install react-app-rewired --save-dev
/* package.json */
"scripts": {
-"start":"react-scripts start",
+"start":"react-app-rewired start",
-"build":"react-scripts build",
+"build":"react-app-rewired build",
-"test":"react-scripts test --env=jsdom",
+"test":"react-app-rewired test --env=jsdom",
}
3.然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports =function override(config, env){
return config;
};
安装 babel-plugin-import
babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js 文件。
npm install babel-plugin-import --save-dev
+ const { injectBabelPlugin } =require('react-app-rewired');
module.exports =function override(config, env){
+config= injectBabelPlugin(['import', { libraryName:'antd-mobile', style:'css'}],config);
return config;
};
5.组件内引用
-import Button from 'antd-mobile/lib/button';
+import { Button } from 'antd-mobile';
六、less 配置
1.安装所需less依赖
npm install less-loader less --save-dev
2.安装react-app-rewire-less
npm install --save-dev react-app-rewire-less
3.根目录下找到刚才的config-overrides.js 继续修改配置
/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
+ config = rewireLess.withLoaderOptions({modifyVars: { "@primary-color": "#1DA57A" }})(config, env);
return config;
};
react学习路线-创建项目
猜你喜欢
转载自blog.csdn.net/Tom__cy/article/details/105860456
今日推荐
周排行