1. 程式人生 > >react+antd後臺管理系統(1)環境初始化

react+antd後臺管理系統(1)環境初始化

react後臺管理系統(1)環境初始化

react + antd + less + 按需載入環境配置

1. 使用create-react-app建立app

create-react-app yinbao-ams2
如圖

2. 引入antd和less

yarn add antd or npm install antd --save
yarn add less less-loader

3. antd實現按需載入 babel-plugin-import

step1:
暴露webpack等配置檔案 yarn eject,
安裝babel-plugin-import yarn add babel-plugin-import
修改配置檔案
{
    // 修改前
    test: /\.(js|jsx|mjs)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {              
    },
},
{
    // 修改後
    test: /\.(js|jsx|mjs)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {  
        // 新增
        plugins: [['import',[{libraryName: 'antd',style: true,}]]
], }, },

4. 結果展示

目錄結構
這裡寫圖片描述

程式碼
這裡寫圖片描述

展示
這裡寫圖片描述

附: less 報錯


.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

這裡寫圖片描述

新增

 {
    loader: "less-loader", // compiles Less to CSS
    options: {
      javascriptEnabled: true,
    }
  }