react：react + dva + router + roadhog 基础项目搭建

一、脚手架安装

 

        第一步：全局安装 dva，这里有个条件，node 版本要 >= 6.5 且 dva-cli 版本要在 0.7x。

                       npm install dva-cli -g

    第二步：查看版本号

            dva -v

 

二、创建一个 dva 的 demo

 

    dva new reactbase

    cd myapp

    npm start

 

    本地生成的目录结构如下：

                                                    

 

    注）如果 npm install 安装报错，改成 cnpm install 

    

    第一步：生成的目录结构如下：

        

 

    第二步：了解下 roadhog 的配置

        链接地址：https://github.com/sorrycc/roadhog

            

三､配置 antd 、babel-plugin-import

 

    babel-plugin-import 主要是用来引和 antd 的js 和 css 文件，打包出来的文件不会太大。

 

    通过 npm 安装 antd 和 babel-plugin-import。babel-plugin-import 是用来按需加载 antd 的脚本和样式的，

 

        cnpm install antd babel-plugin-import --save

    

四、安装 react-router-dom

    cnpm install react-router-dom --save-dev

 

五、在 .webpackrc 文件下配置：webpack 插件对 antd 按需加载

 

     "extraBabelPlugins": [

       [

         "import",

         {

           "libraryName": "antd",

           "libraryDirectory": "es",

           "style": "css"

         }

       ]

     ],

 

六、在 .webpackrc 文件下继续：配置代理

    

    // 配置一下代理

    "proxy": {

      "/api": {

        "target": "http://jsonplaceholder.typicode.com/",

        "changeOrigin": true,

        "pathRewrite": {

          "^/api": ""

        }

      }

    }

 

    最终 五 和 六 合成的代码是：

        

 

七、项目构建

 

    页面运行（npm start）后的界面如下：

 

    

 

 1､配置入口页面：

    默认：

                

 

        修改后：

                

        

    2､配置路由：./src/router.js

 

        默认：

                

 

        修改后：

                

 

    3､添加主界面页：新增 App.js 

        

        新增的文件可以理解为：首页 

 

        代码如下：

        

                

 

        效果图如下：

 

                

 

    

    4､ 添加组件：./src/components 下新增菜单组件，调用 antd 组件化。

 

        默认的组件化格式如下：

 

            

 

        修改成：

    

            

 

            下面新建菜单文件：用 antd  的 Menu 菜单。

 

                    省略：参照官方文档：https://ant.design/components/menu-cn/

 

            在 App.js 中调用 Menus 组件

 

                

 

            此时页面效果如下：

 

                    

            

            注）布局自行优化。可以用 Layout 布局。

 

    5､安装 less 或者 sass

        

             cnpm install less less-loader --save-dev

       或

       cnpm install sass sass-loader --save-dev

 

    本项目中遇到一个问题：less 文件引入的时候第一种方法生效，第二种方法不生效（如下图）？

 

                

 

        原因是因为 dva 中开启了 css modules。antd 的样式覆盖了样式。

 

        解决方法如下：

        :global {

            // 写据需样式

         }

 

    6､路由配置

 

            简单来说就是点击左侧菜单，右边内容改变。

 

            方法一：

 

                    配置：App.js 

 

                    

 

                    配置：router.js

 

                    

 

                    配置：Menu.js

 

                    

 

        方法二：

 

            配置：index.js (入口文件）

 

                    

 

            配置：App.js

 

                    

 

            配置：router.js

 

                

        

    7､效果出来了

 

                

 

六､ 模块分析

 

    初始化的 dva , 参考链接：https://www.jianshu.com/p/69f13e9123d9

 

    1､const app = dva() 

 

    2､app.use

        用来加载插件，reduce 第三方这种

       

 

    3､app.model

        用来接收发送的 action 

        

    

    4､app.router

        在这里面进行所有页面初始化的路由设置

 

 

    1､添加路由

    2､添加 model

    3､添加service

    4､添加界面

 

参考链接：https://blog.whezh.com/dva-basic-usage/

 

        https://www.cnblogs.com/Chasel-Chen/p/8984073.html

        

        https://github.com/sorrycc/roadhog

                

框架搭建：

                http://que01.github.io/2016/11/20/dva-react/

 

 

react + dva + router + roadhog 基础项目搭建