一、项目初始化:
node: v.8.11.2
npm: 5.6.0
npm install -g create-react-app // 当前版本3.0.1复制代码
进入项目目录,创建项目
create-react-app tempalte_console // 等待安装完成复制代码
cd template_console && npm run eject // 输入ynpm复制代码
npm start复制代码
成功示例:
二、删减基础项目非必要代码
打开项目
- 删除"src/index.css","src/App.js","src/App.test.js","src/App.css","src/logo.svg"文件
- 修改“src/index.js”文件
/*依赖包*/ import React from 'react'; import ReactDOM from 'react-dom'; import * as serviceWorker from './serviceWorker'; /*入口类*/ class Main extends React.Component { render() { return ( <div>123</div> ) } } ReactDOM.render(<Main/>, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();复制代码
三、添加sass、less、css-modules支持
less支持
安装依赖
npm install less less-loader --save-dev复制代码
修改config/webpack.config.js文件
// 44行
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// 47行复制代码
// 456行
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'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,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
// 485行复制代码
src添加index.less文件,并添加样式
div{ color:red; }复制代码
修改src/index.js文件,引入样式
...
/*样式*/
import './index.less';
...复制代码
重启服务查看效果-字体变红
sass支持
安装依赖
npm install node-sass --save-dev // 若安装不成功,可查看之前发的文章如何安装node-sass复制代码
添加index.scss文件
div{ color:yellow; }复制代码
修改src/index.js文件,引入样式
...
/*样式*/
import './index.scss';
...复制代码
重启服务查看效果-字体变黄
css-modules支持
默认支持css-modules方式使用样式,不需要配置以及安装任何插件,但是文件的命名规则为以下三种方式时才能使用
index.module.css
index.module.scss
index.module.less
添加index.module.css文件
div{ color:blue; }复制代码
修改src/index.js文件,引入样式
...
/*样式*/
import './index.module.css';
...复制代码
重启服务查看效果-字体变蓝
config/webpack.config.js配置别名
// 272行
alias: {
'@': paths.appSrc,
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
// 279行复制代码
四、引入Ant Design of React样式库
npm install antd --save // 当前版本 3.18.1复制代码
配置按需引入组件(不配置的话如果不手动引入全局样式或者单个组件样式,则组件样式不会显示)
npm install babel-plugin-import复制代码
在package.json文件中添加css支持
// 127行
"babel": {
"presets": [
"react-app"
],
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}]
]
},
// 140行复制代码
重新运行项目,此时样式正常显示且为按需加载
五、添加redux,router支持
安装依赖
npm install react-redux react-router-dom复制代码
src/stroe.js添加文件(拆分dva框架中的对应代码)
后续代码见项目注释...