摘要：在的的配置中添加自定義主題由腳手架和官網(wǎng)介紹，我們已經(jīng)自己配置并新建好了主題文件。單頁面博客從前端到后端環(huán)境搭建單頁面博客從前端到后端基于搭建博客前后臺(tái)界面單頁面博客從前端到后端基于和的權(quán)限驗(yàn)證與的設(shè)計(jì)

在上篇文章我們已經(jīng)搭建好了基礎(chǔ)的開發(fā)環(huán)境，接下來會(huì)介紹如何引入 DVA 和 ANTD ，以及在引入過程中需要注意的問題。這里只會(huì)詳細(xì)的書寫部分組件，其他的組件都是大同小異。你可以在 github倉庫 中找到這些組件。

這里我簡單的畫了一個(gè)博客的輪廓圖。這樣在寫組件的過程中有助于有個(gè)整體性的思路，不迷路…

blog 
├─ dist           # 輸出目錄
├─ task           # 這里來放webpack處理和配置文件
├─ src
|  ├─ assets      # 靜態(tài)文件文件夾
|  ├─ components  # 組件
|  |  ├─ Home     # Home 頁面的文件夾
|  |  ├─ Archive 
|  |  ├─ About
|  |  ├─ Admin    # 后臺(tái)界面文件夾
|  |  ├─ Header.js    # 公共的 Header 組件
|  |  ├─ Footer.js    # 公共的 Footer 組件
|  |  ├─ UserCard.js  # 公共的 UserCard 組件
|  |  ├─ Login.js     # 公共的 Login 組件
|  ├─ containers  # Redux 的容器組件
|  |  ├─ Home.js      # Home 組件的容器
|  |  ├─ Archive.js
|  |  ├─ About.js
|  |  ├─ Admin        # 后臺(tái)各界面的容器文件夾
|  ├─ router.js   # React 路由
|  └ index.js     # 入口文件
| package.json

Lightweight front-end framework based on redux, redux-saga and [email protected]. (Inspired by elm and choo)

要知道 dva 是對 redux , redux-saga , react-router 的封裝，使用上有點(diǎn)像 express.js ，那么你就要多少對他們有所了解，dva 的 github 倉庫 有詳細(xì)的入門指南、概念和示例，可以先去了解一下 。

更改入口文件 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 (
        
            
                
                
                
                
                
                    
                    
                    
                    
                
            
        
    )
}

從這里可以看出， dva 自己在內(nèi)部引入 react-router-redux ，然后使用 react-router-redux 提供的 combineReducers 把 routerRedux 合并到用戶的 reducers 中

限于文章的篇幅，dva 的 model 的設(shè)計(jì)會(huì)放到下一次的文章來描述

按需加載

在引入 ANTD 之前，我們先來實(shí)現(xiàn) 按需加載 。其實(shí)概念很簡單，就是我們在引入一個(gè)樣式庫的時(shí)候，往往只會(huì)用到這個(gè)樣式庫的部分組件，但是工具會(huì)把整個(gè)組件庫都打包到我們的項(xiàng)目中，這是我們不想看到的。按需加載 就是用來打包我們引入的組件，可以使用 babel-plugin-import 來具體實(shí)現(xiàn)。

在 task/config.js 的 babel-loader 的 plugins 配置中添加:
["import", { "libraryName": "antd", "style": true }]

自定義主題

由腳手架 atool-build 和 官網(wǎng)介紹，我們已經(jīng)自己配置并新建好了主題文件 theme.js 。

添加 less-loader 處理樣式文件

上節(jié)我們只是添加了對 .module.less 文件進(jìn)行編譯，在自定義主題時(shí)，需要對 less 變量進(jìn)行覆蓋，所以要求 babel-plugin-import 的 style 選項(xiàng)設(shè)置為 true ，讓它導(dǎo)出 antd 組件的 .less 樣式文件才能進(jìn)行變量覆蓋操作。

在 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/ 至少會(huì)匹配到 .module.less 和 .less 文件，所以要排除 .module.less ，因?yàn)樗枰?css-module 處理。

你也可能會(huì)通過添加 exclude , include 來對樣式庫中的 less 文件和自己編寫的文件進(jìn)行區(qū)別，畢竟樣式庫肯定都是從 node_modules 目錄中加載，而自己的是從 src 目錄下加載的。也正因?yàn)闃邮綆焓菑?node_modules 目錄下加載的，所以這樣做可能會(huì)導(dǎo)致降低 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 (
        
            

                
                     {}} />
                
            
            
                {children}
            
            
        
    )
}

export default connect()(App)

因?yàn)?dva 封裝了 redux ， 源文件 中也是直接導(dǎo)出 react-redux 的 connect 方法。所以在創(chuàng)建容器組件的時(shí)候還是等同于 react-redux 。

注意，這個(gè) App組件是作為子路由組件的父組件，即 children  代表的就是那些子組件 Home , Archive …

其他的展示組件，即 /src/containers 文件夾下面的組件，都是大同小異，就不一一贅述。

我們看到 src/container/App.js 展示組件，引入了一個(gè) HeaderComponent ，在 src/components 下面新建一個(gè) 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 (
        

            
                
                    
                        Home
                        Archive
                        About me
                    
                
                
                    

                        {children}
                    
                
            
        
    )
}

export default HeaderComponent

這就是個(gè)普通的 React 的展示組件沒什么好說的，這些組件可以直接在 Antd 的官網(wǎng)上找到用法，而且都有示例代碼。

const routePath = (routes[routes.length - 1] || {}).path || "/"
找到路由路徑中的最后一個(gè)名稱，如 /home 中的 home ，作為 Menu 的默認(rèn)選中項(xiàng)，這樣在當(dāng)前頁面刷新，就可以讓當(dāng)前頁面對應(yīng)的導(dǎo)航高亮。

其他的展示型組件也都是大同小異，你可以在 github倉庫 中找到它們的實(shí)現(xiàn)。

在 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]"
    }
},

關(guān)于 url-loader 的配置方法，可以在 webpack 的文檔中查看

這篇文章主要是引入了兩個(gè)重要的庫 dva 和 antd ，以及編寫部分展示組件。接下來，我們會(huì)對 dva 的數(shù)據(jù)層，已經(jīng)后臺(tái)初步搭建，同步進(jìn)行前后端的開發(fā)。

【單頁面博客從前端到后端】環(huán)境搭建

【單頁面博客從前端到后端】基于 DVA+ANTD 搭建博客前后臺(tái)界面

【單頁面博客從前端到后端】基于 Passport 和 Koa@2 的權(quán)限驗(yàn)證與 DVA 的 Model 設(shè)計(jì)