imooc-manager 筆記(一) 搭建工程

imooc-manager 筆記

1. 工程搭建

1. 使用create-react-app 創建空項目

2. 安裝所需要的基礎插件

   • React-router-dom

   • axios

   • antd

   • 暴露webpack的配置文件

     yarn run eject

   • 安裝less-loader

   • 安裝less

     安裝less@^2.7.3

   • 修改less-loader

       // Adds support for Less Modules
       {
           test: /\.less$/,
           use: [
               require.resolve('style-loader'),
               {
                   loader: require.resolve('css-loader'),
                   options: {
                       importLoaders: 1,
                   },
               },
               {
                   loader: require.resolve('postcss-loader'),
                   options: {
                       // Necessary for external CSS imports to work
                       // https://github.com/facebookincubator/create-react-app/issues/2677
                       ident: 'postcss',
                       plugins: () => [
                           require('postcss-flexbugs-fixes'),
                           autoprefixer({
                               browsers: [
                                   '>1%',
                                   'last 4 versions',
                                   'Firefox ESR',
                                   'not ie < 9', // React doesn't support IE8 anyway
                               ],
                               flexbox: 'no-2009',
                           }),
                       ],
                   },
               },
               {
                   loader: require.resolve('less-loader')
               }
           ],
       },
     

   • 配置antd 按需引入

   • 修改主題色

2. 項目主頁結構開發

1. 主頁結構定義

   • 頁面結構定義

   • 目錄結構定義

     • 從業務層面將目錄進行拆分
     • 從代碼層面對目錄進行拆分

     標準化、工程化

   • 柵格系統的使用

   • calc計算方法的使用

2. 主頁拆分

   左右兩欄，左側爲目錄，右側分爲上中下，頁面跳轉過程中左側目錄，右側的上下均不變，變化的只是中間的內容區域。

   在開發過程中，要將左側目錄、右側的頭部、底部抽取成獨立的組件

   右側內容區，動態生成

3. codeing

   • 目錄設計

     首先區分頁面和組件的概念，頁面由組件構成，是我們可以看到的，組件是由頁面所引用的部分

     組件中，組件和樣式一般是配套使用的以Header組件爲例，目錄結構如下：

     |-src
     	|-component
       		|-Header
     			|-index.js
     			|-index.less
     

   • 主頁佈局

     主頁是左右分欄，所以最好使用柵格系統，進行佈局

     antd中柵格是將一個網頁平均分成24等分

     <Row>
       <Col span={12}>col-12</Col>
       <Col span={12}>col-12</Col>
     </Row>
     

   • calc的使用

     使用calc計算，只要知道header和footer的準確高度，就可以自動計算出內容區的高度，例如

     header和footer的高度均爲90px，則content的高度可以設置爲calc(100% - 180px),即可填滿屏幕

     這裏注意less計算會和calc計算衝突，上面的結果會被計算成calc(-80%),解決方法：

     calc(~“100% - 180px”)

     參考：https://blog.csdn.net/playboyanta123/article/details/50408335

   • 目錄菜單

     菜單的設計：結構化、語義化

     [obj,obj,obj]

     const menuList = [
         	{
             title:'首頁',
             key:'/admin/home'
         },
         {
             title:'UI',
             key:'/ui',
             children:[
                 {
                     title:'按鈕',
                     key:'/ui/buttons',
                 },
                 {
                     title:'彈框',
                     key:'/ui/modals',
                 },
                 {
                     title:'Loading',
                     key:'/ui/loadings',
                 },
                 {
                     title:'通知提醒',
                     key:'/ui/notification',
                 },
                 {
                     title:'全局Message',
                     key:'/ui/messages',
                 },
                 {
                     title:'Tab頁籤',
                     key:'/ui/tabs',
                 },
                 {
                     title:'圖片畫廊',
                     key:'/ui/gallery',
                 },
                 {
                     title:'輪播圖',
                     key:'/ui/carousel',
                 }
             ]
         }]	
     

     • 使用antd的垂直菜單：

       參考：https://ant.design/components/menu-cn/

     • 遞歸渲染菜單

        //菜單渲染
       handleRenderMenu = (data)=>{
           return data.map((item) =>{
               if(item.children){
                   return (
                       <SubMenu
                           title={item.title}
                           key={item.key}
                       >
                           {this.handleRenderMenu(item.children)}
                       </SubMenu>
                   )
               }
               return <Menu.Item key={item.key}>{item.title}</Menu.Item>;
           });
       };
       

   • Header組件

     分析：

     header組件分爲上下兩部分：
     

     • jsonp跨域

       yarn add jsonp

       axios本身不支持跨域

       同源策略：

       協議相同、域名相同、端口相同
       

       axios 封裝：

       promise對象 （ES6語法）

   • Footer組件的開發

     • 底部組件的佈局

     • Home頁面的實現

     • 使用CSS實現箭頭圖標

       https://www.cnblogs.com/rebirth-csz/p/8006563.html

實戰項目視頻：https://download.csdn.net/download/a2011102394/10724215