本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04
2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08
3、React多页面应用3(webpack4 多页面实现)---2018.04.09
4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10
5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11
6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12
7、React多页面应用7(webpack4 生产环境配置)---2018.04.13
8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16
9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
1、实现多页面,新建shop页面
app->component 下新建shop目录,并创建Index.jsx
完整代码
import React from 'react'; import '../../public/css/common.pcss'; import '../../public/css/shop.pcss'; class Index extends React.Component { render() { return ( <div className="cont"> <div className="top"> <div>这是头部</div> <div> <i className="logo"/> </div> <div className="nav"> <a href="/index.html">首页</a> <a href="/shop.html">商城</a> </div> </div> <div className="shop"> 这是商城 </div> <div className="bottom"> 这是底部 </div> </div> ); } } export default Index;
2、建立shop.css
app->public->css下新建shop.pcss
完整代码
.shop { color: blue; }
3、新建common.pcss
app -> public ->css 下
.cont { .top { color: #FF9302; .logo { display: inline-block; width: 200px; height: 200px; background-image: url("../img/ico-header-logo.png"); background-size: contain; } } .bottom { color: #F00000; } }
4、修改index.pcss
.index{ color: brown; }
5、修改首页Index.jsx
import React from 'react'; import '../../public/css/common.pcss'; import '../../public/css/index.pcss'; class Index extends React.Component { render() { return ( <div className="cont"> <div className="top"> <div>这是头部</div> <div> <i className="logo"/> </div> <div className="nav"> <a href="/index.html">首页</a> <a href="/shop.html">商城</a> </div> </div> <div className="index"> 这是首页 </div> <div className="bottom"> 这是底部 </div> </div> ); } } export default Index;
6、新建shop入口文件
entryBuild 目录下 新建shop.js
import React from 'react'; import ReactDOM from 'react-dom'; import Index from '../app/component/shop/Index.jsx'; ReactDOM.render(<Index/>,document.getElementById('app'));
你可能会发现这个shop.js和index.js文件很像,那么以后我们要建更多页面是不是多要手动来建啊!答案是不会的,我们会在下面教程讲解如何自动化生成这些页面!
7、修改webpack入口文件
config -> webpack -> webpack.base.conf.js
新增如下代码
'shop':'./entryBuild/shop.js'
8、增加shop.html页面
devBuild 页面下 新建shop.html
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="telephone=no" name="format-detection"> <title>react1</title> </head> <body> <div id="app"></div> <script type=text/javascript src=js/shop.js></script> </body> </html>
是不是发现这个页面也很重复,对的,会让他自动化生成!
9、我们运行浏览器
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!