在上篇文章我们已搭建好了基本的开辟环境,接下来会引见怎样引入 DVA 和 ANTD ,以及在引入过程当中须要注重的题目。这里只会细致的誊写部份组件,其他的组件都是迥然不同。你能够在 github堆栈 中找到这些组件。
博客的原型图
这里我简朴的画了一个博客的轮廓图。如许在写组件的过程当中有助于有个整体性的思绪,不迷路…
增加目次构造
blog
├─ dist # 输出目次
├─ task # 这里来放webpack处置惩罚和设置文件
├─ src
| ├─ assets # 静态文件文件夹
| ├─ components # 组件
| | ├─ Home # Home 页面的文件夹
| | ├─ Archive
| | ├─ About
| | ├─ Admin # 背景界面文件夹
| | ├─ Header.js # 大众的 Header 组件
| | ├─ Footer.js # 大众的 Footer 组件
| | ├─ UserCard.js # 大众的 UserCard 组件
| | ├─ Login.js # 大众的 Login 组件
| ├─ containers # Redux 的容器组件
| | ├─ Home.js # Home 组件的容器
| | ├─ Archive.js
| | ├─ About.js
| | ├─ Admin # 背景各界面的容器文件夹
| ├─ router.js # React 路由
| └ index.js # 进口文件
| package.json
引入 DVA 和 ANTD
DVA 的简朴引入
Lightweight front-end framework based on redux, redux-saga and react-router@2.x. (Inspired by elm and choo)
要知道 dva
是对 redux
, redux-saga
, react-router
的封装,运用上有点像 express.js
,那末你就要若干对他们有所相识,dva
的 github 堆栈 有细致的入门指南、观点和示例,能够先去相识一下 。
变动进口文件 src/index.js
import dva from 'dva'
const app = dva()
app.router(require('./router'))
app.start('#root')
新建路由文件 src/router.js
import React from 'react'
import { Router, Route, IndexRoute, IndexRedirect } from 'dva/router'
import AppLayout from './container/App'
import Home from './container/Home'
import Archive from './container/Archive'
import About from './container/About'
import Article from './container/Article'
import AdminArticles from './container/Admin/Articles'
import AdminKeywrods from './container/Admin/Keywords'
import AdminEditor from './container/Admin/Editor'
import AdminLayout from './container/Admin/Admin'
export default ({history, app}) => {
return (
<Router history={history}>
<Route path="/" component={AppLayout}>
<IndexRoute component={Home} />
<Route path="archive" component={Archive} />
<Route path="about" component={About} />
<Route path="article/:id" component={Article} />
<Route path="admin" component={AdminLayout}>
<IndexRedirect to="articles" />
<Route path="articles" component={AdminArticles} />
<Route path="keywords" component={AdminKeywrods} />
<Route path="editor" component={AdminEditor} />
</Route>
</Route>
</Router>
)
}
从这里能够看出, dva
本身在内部引入 react-router-redux ,然后运用 react-router-redux
供应的 combineReducers
把 routerRedux
合并到用户的 reducers
中
限于文章的篇幅,
dva
的model
的设想会放到下一次的文章来形貌
引入 ANTD
按需加载
在引入 ANTD
之前,我们先来完成 按需加载
。实在观点很简朴,就是我们在引入一个款式库的时刻,每每只会用到这个款式库的部份组件,然则东西会把全部组件库都打包到我们的项目中,这是我们不想看到的。按需加载
就是用来打包我们引入的组件,能够运用 babel-plugin-import 来详细完成。
在 task/config.js
的 babel-loader
的 plugins 设置中增加: ["import", { "libraryName": "antd", "style": true }]
自定义主题
由脚手架 atool-build 和 官网引见,我们已本身设置并新建好了主题文件 theme.js
。
增加 less-loader 处置惩罚款式文件
上节我们只是增加了对 .module.less
文件举行编译,在自定义主题时,须要对 less 变量举行掩盖,所以请求 babel-plugin-import
的 style
选项设置为 true
,让它导出 antd
组件的 .less
款式文件才举行变量掩盖操纵。
在 task/config.js
中 module.rules
追加
{
test: function(path){
return /\.less$/.test(path) && !/\.module\.less$/.test(path)
},
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: postcssPlugins
}
},
{
loader: 'less-loader',
options: {"modifyVars": theme}
}
]
})
},
注重 /\.less/
最少会匹配到 .module.less
和 .less
文件,所以要消除 .module.less
,由于它须要被 css-module
处置惩罚。
你也可能会经由过程增加 exclude
, include
来对款式库中的 less
文件和本身编写的文件举行区分,毕竟款式库一定都是从 node_modules
目次中加载,而本身的是从 src
目次下加载的。也正由于款式库是从 node_modules
目次下加载的,所以如许做可能会致使下降 webpack
的编译速率。
增加容器组件和展现组件
容器组件
在 /src/containers
下新建 App.js
import React, { PropTypes } from 'react'
import { connect } from 'dva'
import { Layout, Menu, Breadcrumb, Row, Col, Icon } from 'antd'
import HeaderComponent from 'components/Header'
import FooterComponent from 'components/Footer'
import LoginModel from 'components/Login'
const { Header, Content, Footer } = Layout
const App = ({children, routes}) => {
return (
<Layout>
<Header>
<HeaderComponent routes={routes}>
<LoginModel doLogin={() => {}} />
</HeaderComponent>
</Header>
<Content style={{ margin: '24px 100px 0', background: '#fff', minHeight: 280, overflow: 'hidden' }}>
{children}
</Content>
<Footer>
<FooterComponent />
</Footer>
</Layout>
)
}
export default connect()(App)
由于 dva
封装了 redux
, 源文件 中也是直接导出 react-redux
的 connect
要领。所以在建立容器组件的时刻照样等同于 react-redux
。
注重,这个 App组件是作为子路由组件的父组件,即
children
代表的就是那些子组件Home
,Archive
…
其他的展现组件,即 /src/containers
文件夹下面的组件,都是迥然不同,就不逐一赘述。
展现组件
我们看到 src/container/App.js
展现组件,引入了一个 HeaderComponent
,在 src/components
下面新建一个 Header.js
import React from 'react'
import { Layout, Menu, Breadcrumb, Row, Col } from 'antd'
import { Router, Link } from 'dva/router'
const HeaderComponent = (props) => {
const { children, routes } = props
const routePath = (routes[routes.length - 1] || {}).path || '/'
return (
<div>
<Row>
<Col span={16}>
<Menu
mode="horizontal"
defaultSelectedKeys={[routePath]}
style={{ lineHeight: '64px', backgroundColor: 'transparent' }}
>
<Menu.Item key="/"><Link to="/">Home</Link></Menu.Item>
<Menu.Item key="archive"><Link to="archive">Archive</Link></Menu.Item>
<Menu.Item key="about"><Link to="about">About me</Link></Menu.Item>
</Menu>
</Col>
<Col span={8}>
<div style={{ lineHeight: '64px', float: 'right', padding: '0 20px' }}>
{children}
</div>
</Col>
</Row>
</div>
)
}
export default HeaderComponent
这就是个一般的 React 的展现组件没什么好说的,这些组件能够直接在 Antd
的官网上找到用法,而且都有示例代码。
const routePath = (routes[routes.length - 1] || {}).path || '/'
找到路由途径中的末了一个称号,如 /home
中的 home
,作为 Menu
的默许选中项,如许在当前页面革新,就能够让当前页面对应的导航高亮。
其他的展现型组件也都是迥然不同,你能够在 github堆栈 中找到它们的完成。
引入 url-loader 来处置惩罚文件途径
在 task/config.js
中的 module.rules
追加:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
},
关于 url-loader
的设置要领,能够在 webpack
的文档中检察
小结
这篇文章主如果引入了两个主要的库 dva
和 antd
,以及编写部份展现组件。接下来,我们会对 dva
的数据层,已背景开端搭建,同步举行前后端的开辟。