From d06b1fa15e9de217f1f6644f3045702ffbd71c4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BF=A1=E9=91=AB-King?= <45808948@qq.com> Date: Wed, 23 Oct 2019 18:00:15 +0800 Subject: [PATCH] docs: practical projects using Umi UI (#19240) * :memo: practical projects using Umi UI * :memo: docs * :memo: docs * :memo: projects doc --- docs/react/practical-projects.en-US.md | 143 ++++++---------------- docs/react/practical-projects.zh-CN.md | 163 +++++++------------------ 2 files changed, 81 insertions(+), 225 deletions(-) diff --git a/docs/react/practical-projects.en-US.md b/docs/react/practical-projects.en-US.md index 78dc79dd9b..54e1624cbb 100644 --- a/docs/react/practical-projects.en-US.md +++ b/docs/react/practical-projects.en-US.md @@ -7,120 +7,66 @@ In real project development, you might need a data flow solution like Redux or M Dva is a lightweight data flow solution based on Redux. The concept comes from elm. It supports side effects, hot module replacement, dynamic loading, react-native, SSR, etc. It has been widely used in production. -And [umi](http://umijs.org/) is a routing-based framework that supports [next.js-like conventional routing](https://umijs.org/guide/router.html) and various advanced routing functions, such as [routing-level on-demand loading](https://umijs.org/en/plugin/umi-plugin-react.html#dynamicimport). With a complete [plugin system](https://umijs.org/plugin/) that covers every life cycle from source code to build product, umi is able to support various functional extensions and business needs. +And [umi](http://umijs.org/) is a routing-based framework that supports [next.js-like conventional routing](https://umijs.org/guide/router.html) and various advanced routing functions, such as [routing-level on-demand loading](https://umijs.org/en/plugin/umi-plugin-react.html#dynamicimport). With a complete [plugin system](https://umijs.org/plugin/) that covers every life cycle from source code to build product, umi is able to support various functional extensions and business needs; meanwhile [Umi UI](https://umijs.org/guide/umi-ui.html) is provided to enhance the development experience and development efficiency through Visual Aided Programming (VAP). > You may also be interested in [Ant Design Pro](https://pro.ant.design/), an Out-of-box UI solution for enterprise applications based on umi, dva and ant design. -This article will guide you to create a simple application from zero using umi, dva and antd. +This article will guide you to create a simple application from zero using Umi UI, dva and antd. -## Create New App - -First create an empty directory, - -```bash -$ mkdir myapp -$ cd myapp -``` +## Install Umi UI It is recommended to use yarn to create an application and execute the following command. -> If you are using npm, execute `npm create umi` and the effect will be the same. +> If you are using npm, execute `npm install umi -g` and the effect will be the same. ```bash -$ yarn create umi - -yarn create v1.12.0 -[1/4] 🔍 Resolving packages... -[2/4] 🚚 Fetching packages... -[3/4] 🔗 Linking dependencies... -[4/4] 📃 Building fresh packages... - -success Installed "create-umi@0.9.5" with binaries: - - create-umi +$ yarn global add umi +$ umi -v +2.10.4 ``` -Yarn will install the latest version of [create-umi](https://github.com/umijs/create-umi) and then create the app with interactive ui. +Make sure the umi version is above 2.10.0. -Select `app` and press Enter to confirm. +## Create New App -``` -? Select the boilerplate type - ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. -❯ app - Create project with a simple boilerplate, support typescript. - block - Create a umi block. - library - Create a library with umi. - plugin - Create a umi plugin. -``` - -Select `antd` and `dva` and press Enter to confirm. +Start the app, ```bash - create package.json - create mock/.gitkeep - create src/assets/yay.jpg - create src/layouts/index.css - create src/layouts/index.js - create src/pages/index.css - create src/pages/index.js - create src/global.css - create .gitignore - create .editorconfig - create .env - create .umirc.js - create .eslintrc - create .prettierrc - create .prettierignore - create src/models/.gitkeep - create src/dva.js -✨ File Generate Done -✨ Done in 966.73s. +$ umi ui + +🚀 Starting Umi UI using umi@2.10.4... +🧨 Ready on http://localhost:3000/ ``` -Then install dependencies, +After starting, Umi UI will automatically open the browser, then click `Create Project`, select the path and enter `App name`, as shown below. -```bash -$ yarn -``` + -Then start the app, +Click `Next`, select `Basic Template`, select `antd` and `dva` on the technology stack, then click `Finish`. -```bash -$ yarn start -``` + -After a few seconds, you will see the following output, +In the project creation process, wait a few minutes. -```bash - DONE Compiled successfully in 212ms + - App running at: - - Local: http://localhost:8000/ - - Network: http://{{ YourIP }}:8000/ -``` +After creating, go to `Overview` and click on the shortcut entry `Run Dev`. -Open [http://localhost:8000](http://localhost:8000) in your browser, you will see the welcome page of umi. + - +In the task page, click `Start`, + + + +When prompted, open [http://localhost:8000](http://localhost:8000) in your browser, you will see the welcome page of umi. + + ## Integrate antd -After selecting `antd` earlier, antd's dependencies are automatically handled and loaded on demand. You can check the configuration in `.umirc.js` to make sure antd is turned on. +After selecting `antd` earlier, antd's dependencies are automatically handled and loaded on demand. You can check the `Configuration` to make sure antd is turned on. -```js -// ref: https://umijs.org/config/ -export default { - plugins: [ - // ref: https://umijs.org/plugin/umi-plugin-react.html - [ - 'umi-plugin-react', - { - antd: true, - dva: true, - }, - ], - ], -}; -``` + > And if you want to use a fixed version of antd, you can install additional antd dependency in your project, and the antd dependencies declared in package.json will be used first. @@ -152,6 +98,10 @@ As your application grows and you notice you are sharing UI elements between mul Let's create a `ProductList` component that we can use in multiple places to show a list of products. +Click `Open in editor`, + + + Create `src/components/ProductList.js` by typing: ```js @@ -262,28 +212,9 @@ Refresh your browser, you should see the following result: ## Build -Now that we've written our application and verified that it works in development, it's time to get it ready for deployment to our users. To do so, run the following command, +Now that we've written our application and verified that it works in development, it's time to get it ready for deployment to our users. To do so, click `build` in Task page. -```bash -$ npm run build -``` - -After a few seconds, the output should be as follows, - -```bash -> @ build /private/tmp/sorrycc-V0lLrF -> umi build - -[5:01:58 PM] webpack compiled in 11s 615ms - - - DONE Compiled successfully in 11622ms 5:01:58 PM - -File sizes after gzip: - - 340.44 KB dist/umi.js - 17.82 KB dist/umi.css -``` + The `build` command packages up all of the assets that make up your application —— JavaScript, templates, CSS, web fonts, images, and more. Then you can find these files in the `dist/` directory. diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index 006129b45b..375f476b46 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -7,120 +7,66 @@ title: 项目实战 [dva](http://dvajs.com/) 是一个基于 Redux 的 轻量级数据流方案，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。 -[umi](http://umijs.org/) 则是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持[类 next.js 的约定式路由](https://umijs.org/zh/guide/router.html)，以及各种进阶的路由功能，并以此进行功能扩展，比如[支持路由级的按需加载](https://umijs.org/zh/plugin/umi-plugin-react.html#dynamicimport)。然后配以完善的[插件体系](https://umijs.org/zh/plugin/)，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。 +[umi](http://umijs.org/) 则是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持[类 next.js 的约定式路由](https://umijs.org/zh/guide/router.html)，以及各种进阶的路由功能，并以此进行功能扩展，比如[支持路由级的按需加载](https://umijs.org/zh/plugin/umi-plugin-react.html#dynamicimport)。然后配以完善的[插件体系](https://umijs.org/zh/plugin/)，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，同时提供 [Umi UI](https://umijs.org/zh/guide/umi-ui.html) 通过可视化辅助编程（VAP）提高开发体验和研发效率。 > 你可能也会对 [Ant Design Pro](https://pro.ant.design/) 感兴趣，这是一个基于 umi、dva 和 ant design 的开箱即用的中台前端/设计解决方案。 -本文会引导你使用 umi、dva 和 antd 从 0 开始创建一个简单应用。 +本文会引导你使用 Umi UI、dva 和 antd 从 0 开始创建一个简单应用。 + +## 安装 Umi UI + +推荐使用 yarn 安装 Umi UI，执行以下命令。 + +> 如果你使用 npm，可执行 `npm install umi -g`，效果一致。 + +```bash +$ yarn global add umi +$ umi -v +2.10.4 +``` + +确保 umi 版本在 2.10.0 以上。 ## 创建新应用 -先创建一个空目录， +启动 Umi UI， ```bash -$ mkdir myapp -$ cd myapp +$ umi ui + +🚀 Starting Umi UI using umi@2.10.4... +🧨 Ready on http://localhost:3000/ ``` -推荐使用 yarn 创建应用，执行以下命令， +启动后， Umi UI 会自动打开浏览器，点击 `创建项目`，选择路径并输入 `应用名`，如下图： -> 如果你使用 npm，可执行 `npm create umi`，效果一致。 + -```bash -$ yarn create umi +点击 `下一步`，选择 `基础模板`，技术栈选上 `antd` 和 `dva`，然后点击 `完成`。 -yarn create v1.12.0 -[1/4] 🔍 Resolving packages... -[2/4] 🚚 Fetching packages... -[3/4] 🔗 Linking dependencies... -[4/4] 📃 Building fresh packages... + -success Installed "create-umi@0.9.5" with binaries: - - create-umi -``` +进入到项目创建流程，等待几分钟， -yarn 会先安装最新版的 [create-umi](https://github.com/umijs/create-umi)，然后提供交互式的提示来创建应用。 + -选择 `app`, 然后回车确认。 +创建完成后，进入到 `总览`，点击快捷入口 `本地启动`， -``` -? Select the boilerplate type - ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. -❯ app - Create project with a simple boilerplate, support typescript. - block - Create a umi block. - library - Create a library with umi. - plugin - Create a umi plugin. -``` + -选上 `antd` 和 `dva`，然后回车确认。 +在任务页中，点击 `启动`， -``` - create package.json - create mock/.gitkeep - create src/assets/yay.jpg - create src/layouts/index.css - create src/layouts/index.js - create src/pages/index.css - create src/pages/index.js - create src/global.css - create .gitignore - create .editorconfig - create .env - create .umirc.js - create .eslintrc - create .prettierrc - create .prettierignore - create src/models/.gitkeep - create src/dva.js -✨ File Generate Done -✨ Done in 966.73s. -``` + -然后安装依赖， +按提示，点击 [http://localhost:8000](http://localhost:8000)，你会看到 umi 的欢迎界面。 -```bash -$ yarn -``` - -然后启动应用， - -```bash -$ yarn start -``` - -几秒钟后，你会看到以下输出， - -```bash - DONE Compiled successfully in 212ms - - App running at: - - Local: http://localhost:8000/ - - Network: http://{{ YourIP }}:8000/ -``` - -在浏览器里打开 [http://localhost:8000](http://localhost:8000)，你会看到 umi 的欢迎界面。 - - + ## 使用 antd -前面选择 antd 之后，会自动处理 antd 的依赖以及按需加载。你可以检查 `.umirc.js` 里的配置，确保 antd 已开启。 +前面选择 antd 之后，会自动处理 antd 的依赖以及按需加载。你可以检查 `配置`，确保 antd 已开启。 -```js -// ref: https://umijs.org/config/ -export default { - plugins: [ - // ref: https://umijs.org/plugin/umi-plugin-react.html - [ - 'umi-plugin-react', - { - antd: true, - dva: true, - }, - ], - ], -}; -``` + > 而如果要使用固定版本的 antd，你可以在项目里安装额外的 antd 依赖，package.json 里声明的 antd 依赖会被优先使用。 @@ -128,16 +74,10 @@ export default { 我们要写个应用来先显示产品列表。首先第一步是创建路由，路由可以想象成是组成应用的不同页面。 -如果你没有 npx，需要先安装他，用于执行 node_modules 下的命令， - -```bash -$ yarn global add npx -``` - 然后通过命令创建 `/products` 路由， ```bash -$ npx umi g page products +$ umi g page products create src/pages/products.js create src/pages/products.css @@ -152,7 +92,11 @@ $ npx umi g page products 我们来编写一个 `ProductList` component，这样就能在不同的地方显示产品列表了。 -新建 `src/components/ProductList.js` 文件： +点击 `在编辑器中打开`， + + + +然后新建 `src/components/ProductList.js` 文件： ```js import { Table, Popconfirm, Button } from 'antd'; @@ -262,30 +206,11 @@ export const dva = { ## 构建应用 -完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令， +完成开发并且在开发环境验证之后，就需要部署给我们的用户了。点击 `构建`， -```bash -$ npm run build -``` + -几秒后，输出应该如下： - -```bash -> @ build /private/tmp/sorrycc-V0lLrF -> umi build - -[5:01:58 PM] webpack compiled in 11s 615ms - - - DONE Compiled successfully in 11622ms 5:01:58 PM - -File sizes after gzip: - - 340.44 KB dist/umi.js - 17.82 KB dist/umi.css -``` - -build 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。你可以在 `dist/` 目录下找到这些文件。 +构建会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。你可以在 `dist/` 目录下找到这些文件。 ## 下一步