front 入门

前端基本介绍

  • 巴拉巴拉

目前用到的技术

  • React 用于构建用户界面的 JavaScript 库 React 官网

  • Ant Design 服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验 Ant Design 官网

  • ANT DESIGN PRO 开箱即用的中台前端/设计解决方案 ANT DESIGN PRO 官网

Ant Design 基本使用

  1. 配置开发环境 (Mac 为例)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    brew install node

    # 安装成功之后查看版本
    $ node -v
    v12.6.0

    $ npm -v
    6.9.0

    # 用cnpm 代替 npm
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    # 安装 yarn 一个新的 JS 包管理工具, 解决 npm的一些缺陷
    cnpm install -g yarn

    # 配置npm源
    npm config set registry https://registry.npm.taobao.org

    # 查看npm 源
    npm config get registry

  2. 初始化项目

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # 1. 初始化简单的项目
    cnpm init

    cnpm install umi --save-dev

    # 2. 构建类似ANT DESIGN PRO
    mkdir demo & cd demo

    # yarn初始化 根据需要选择项目
    yarn create umi

    $ ls
    CNAME                    config                   jest.config.js           mock                     public                   tests
    README.md                jest-puppeteer.config.js jsconfig.json            package.json             src                      tsconfig.json

  3. 启动项目

    1
    2
    3
    4
    5
    6
    7
    8
    # 安装依赖
    yarn

    # 启动项目
    yarn start  (npm start)

    # 打开浏览器
    http://localhost:8000/