从0到1的环境搭建过程

从0到1的环境搭建过程

     前言： 关于学习ANTD开发的技术栈以及技术准备可以参考ant design 前端入门指南所提供资料进行学习，资金管理系统demo选择了react +redux(react-redux) + react-router，其中redux选择支付宝团队推出了一个轻量级框架dva。首先，我们学习下如何从0到1搭建一套demo可运行的环境。

     本文选型 npm + webpack + babel工具进行环境搭建（以windows环境为示例）。

   一、npm包管理工具

 

       npm 是基于node.js的包管理工具，类似于后台开发中的maven，关于其的学习请移步npm官网：https://www.npmjs.com/，npm官方文档：https://docs.npmjs.com/README

     1、安装node.js(node.js下载地址)

         1.1  点这里下载 node.js安装文件；

         1.2  点击安装，按照提示操作即可；

         1.3  在命令行下，使用node -v 验证安装是否成功（如下图）：

               

         1.4 由于Node.js 已经集成了npm工具，因此可以使用npm -v同时验证npm是否安装成功（如下图）：

               

    2、安装cnpm

        cnpm是淘宝团队整的一个完整的npm 镜像，安装这个的原因是接下来我们要使用npm来安装一些插件，而这些插件是从国外服务器下载，下载速度很慢，受网络影响大，可能出现异常，当然这是个选装项。

        2.1 使用npm install cnpm -g --registry=https://registry.npm.taobao.org命令进行安装，如图（当然这个过程还是会很慢，还是使用npm安装）：

              

       2.2 在命令行使用cnpm -v 验证是否安装成功，如图：

              

  二、dva

 

         dva 是一个基于 react 和 redux 的轻量应用框架，概念来自 elm，支持 sideeffects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。

       1、安装 dva

           1.1  使用cnpminstall dva-cli -g安装

                 

                 注：其中-g指全局安装，可以在任意目录下使用该命令，如果不使用-g，只能在安装目录下使用。

           1.2  使用dva检查是否安装成功，如图：

                 

      2、使用dva new创建项目

               创建项目的过程也比较慢，因为创建过程中要通过npm构建项目，包括项目初始化推荐的目录结构和样例文件，并提供开发服务器、构建脚本、数据mock 服务、代理服务器等功能

               

              2.1 默认的项目结构如下：

              

               接下来，就可以按照这个结构编写前端代码了，具体到前端代码设计，请移步：github教程：教你一步步构建一个中型项目，这个文档由浅入深，有助于加深对antd开发的理解。

            2.2  启动项目

            首先要切换到项目目录下，cd /../../myapp，然后使用npmstart启动即可。

            

           npm start后，同时也会对项目进行打包部署，过几秒会出现：

           

          最后，通过http://localhost:8989即可访问dva的欢迎页面。

          在修改的过程中，保存时，webpack会进行自动部署。

        2.3 webpack:模块打包机

        webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。本文使用的是配置文件的方式使用webpack，即上面的webpack.config.js。

 三、antd

 

          ANT DESIGN 是蚂蚁金服体验技术部出品的一个设计&前端框架，基于 React 框架，具体学习可移步ANT Design官网项目实战进行学习：https://ant.design/docs/react/practical-projects。

       1、安装antd和babel

         1.1  项目中要使用antd，需要通过 cnpm 安装 antd 和 babel-plugin-import ,其中babel-plugin-import 是用来按需加载 antd 的脚本和样式的。

               

                当然也可以使用npm命令安装：npm installantd babel-plugin-import  --save

         1.2  安装完成后，需要编辑 webpack.config.js，使 babel-plugin-import 插件生效，这样我们才能在项目里应用antd的样式，如图：

            

         1.3 要引用antd的组件，可移步https://ant.design/components/layout/组件开发，页面要用到的布局Layout，按钮button，表单form，导航等组件用法都可以在这里。

        2、 启动antd项目

             这是目前在进行的资金管理系统前端代码：http://gerrit.fangdd.cn/#/admin/projects/fangdd/infr/FinanceCenterFrontEnd

             下载demo代码，cd到项目目录下，先执行： cnpminstall  ,  完成后npm start，然后浏览器访问就可以看到效果了。

 

             好了，整个环境搭建完成了，开启你的antd之旅吧。