Antd 项目实战之_00环境准备

Antd 项目实战

简介

以构建快速开发平台为目标,采用前后分离的模式,前端采用 React + antd 构间,后端采用 GO 语言构建

环境准备

1. 安装 visual studio code

2. 安装 NodeJs

3. 安装 yarn

构建前端应用

1. 官方推荐React应用脚手架： create-react-app

2. 快速创建

   
       $ yarn create react-app codeyui-antd
   
       $ cd codeyui_antd
   
       $ yarn start
   

   

3.扩展配置

1. 暴露webpack配置

   #   暴露配置信息
   $   yarn eject
   
   #   安装缺失依赖包
   
   $   yarn add babel-loader --dev
   
   #   启动应用查看
   
   $   yarn start
   

2. 安装Less支持

    #   安装less
    $   yarn add less-loader less --dev

修改config/webpack.config.dev.js，config/webpack.config.prod.js

    # 157行
    原代码：
    
            test: /\.css$/,
    改动后：
            test: /\.(css | less)$ /,
    
    # 158行
    
    原代码：内增加 less-loader
        use:[...]
    改动后：
        use:[...,
            {
                loader: require.resolve("less-loader"), // compiles Less to CSS
                options: { javascriptEnabled: true }
            } 
        ]
   # file-loader
   原代码：
   
        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/,],
    
   改动后：
        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(css|less)$/,],
       

验证：

```bash
    App.css 改为App.less
    App.js 中 改为 import './App.scss'
    # 修改App.less中的 标题为红色
    .App-header {
        background-color: #222;
        height: 150px;
        padding: 20px;
        color: red;
    }

```

引入第三方库

• 引入 UI 库 antd

    $ yarn add antd 

• 引入 Redux

    $ yarn add redux react-redux

• 引入 React-Router

    $ yarn add react-router

到此已完成基本的框架搭建,下一步进形项目结构规划

转载于:https://my.oschina.net/zhgk/blog/1941005