Создайте проект React (Umi+AntD) с нуля

React.js

представлять

Umi

Фреймворк интерфейсных приложений, объединяющий общие компоненты и подключаемые модули. Из коробки есть упакованные макеты, которые можно применять напрямую.

Официальная документация:umijs.org/zh-CN/docs

AntD

Богатая библиотека компонентов.

Официальная документация:Anta.design/docs/реагировать/…

Инициализировать среду и код

В этой статье в качестве примера используется Ubuntu 18.04.

Инициализировать среду узла

Umi3 требует установки NodeJS 10.13+.

Загрузите архив NodeJS:

wget https://npm.taobao.org/mirrors/node/v10.21.0/node-v10.21.0-linux-x64.tar.gz

распаковать в/usr/local/lib/каталог (или другие каталоги, самостоятельно измените путь в следующей команде):

tar -zxvf node-v10.21.0-linux-x64.tar.gz -C /usr/local/lib

Могут потребоваться права администратора, добавьтеsudo

Команда выполнения мягкого подключения:

NODE_PATH=/usr/local/lib/node-v10.21.0-linux-x64/bin
BIN_PATH=/usr/local/bin
ln -s $NODE_PATH/node $BIN_PATH/node
ln -s $NODE_PATH/npm $BIN_PATH/npm
ln -s $NODE_PATH/npx $BIN_PATH/npx

Могут потребоваться права администратора, добавьтеsudo

Убедитесь, что конфигурация завершена:

node -v
npm -v

Информация о выходной версии указывает на то, что NodeJS был успешно установлен.

Инициализировать проект Umi

Создайте и зайдите в папку проекта:

mkdir myapp && cd myapp

Инициализируйте проект Umi:

npx @umijs/create-umi-app

будет создано в папкеpackage.jsonи другие файлы, были настроены зависимости и команды запуска проекта Umi.

Узел установки зависит от:

npm i

Запустите службу:

npm start

пройти черезhttp://localhost:8000(Конкретный порт см. в подсказке после фактического запуска) Посетите начальную страницу проекта:

УстановитьUmi UIинструмент

Umi UI поддерживает добавление готовых шаблонов в приложения на веб-страницах, запуск и остановку интерфейсных служб и других функций.

Установить:

npm i @umijs/preset-ui

Исправлять.umirc.tsфайл, включитьdvaа такжеantd:

export default defineConfig({
  ...  // 忽略其他配置
  dva: {},
  antd: {}
});

Запустите проект еще раз, и вы увидите значок в правом нижнем углу веб-страницы, щелкните его, чтобы начать изучениеUmi UI.

Создайте шаблон страницы с Umi UI

Откройте пользовательский интерфейс Umi и выберите шаблон для добавления в проект:

Пользовательская конфигурация, такая как настройка маршрутизации и расположения файлов кода для новых страниц:

Посетите после подтвержденияhttp://localhost:8000/appsВы можете увидеть, как эта страница создана, не написав ни строчки кода.

Затем измените код, чтобы добавить, удалить и изменить соответствующие компоненты и конфигурации!

Категории