一、概述

  参看官方文档:https://ant.design/docs/spec/introduce-cn

  其中包含了设计价值观、设计原则、视觉、模式、可视化、动态等。

  其中Ant Design 的 React 实现,开发和服务于企业级后台产品。参看文档:https://ant.design/docs/react/introduce-cn

二、安装环境

  配置ant design的开发环境,也相当于配置react配置。以下主要使用idea配置开发环境。

2.1、nodejs

  下载地址:http://nodejs.cn/download/,选择一个版本安装即可。
  这里选择了zip版本,解压后,配置号环境变量。

2.2、安装IntelliJ IDEA

2.3、IntelliJ IDEA与React集成

  参看地址:http://www.jetbrains.com/help/idea/react.html#ws_react_before_you_start

  IntelliJ IDEA与React集成,可帮助您配置,编辑,维护,运行,调试和维护您的应用程序。

2.3.1、打开idea,增加nodejs插件

  File→Settings→Plugins→Browse repositories→搜索nodejs下载安装即可。

  注:如果开发nodejs项目,此时可以打开File→new→Projects→node.js and npm项目模板。详细可参看:地址

2.4、NPM Tool Window

  参看地址:http://www.jetbrains.com/help/idea/npm-tool-window.html

  在package.json 右键 Show npm Scripts,之后就可以通过View | Tool Windows | npm查看到【注意:只有使用Show npm Scripts命令打开它后,才能以此方式访问工具窗口。】

  使用工具窗口运行npm或Yarn脚本。

2.4.1、开始

  idea 的nodejs插件,nodejs,yarn等安装

2.4.2、运行脚本

  在Project工具窗口中选择package.json文件或在编辑器中打开它并在上下文菜单上选择Show npm Scripts时,工具窗口将打开。只要您调用npm或Yarn,它就会开始构建一个脚本树,该脚本在调用它的package.json文件的scripts属性中定义。如果您的项目中有多个package.json文件,则可以为每个文件构建一个单独的脚本树,并在不删除以前生成的树的情况下运行脚本。每棵树显示在一个单独的节点下。

  工具窗口显示脚本输出,报告发生的错误,列出未找到的包或插件等。最后执行的脚本的名称显示在工具窗口的标题栏上。

  1》要构建脚本树,请执行以下操作之一:

    方式一、在Project工具窗口中选择所需的package.json文件,或者在编辑器中打开它并在上下文菜单中选择Show npm Scripts。

    方式二、在npm工具窗口中,点击工具栏+并从列表中选择所需的package.json文件。默认情况下,IntelliJ IDEA在项目的根目录中显示package.json文件。如果您有另一个package.json文件,请单击选择package.json并在打开的对话框中选择需要的package.json文件。IntelliJ IDEA在其标题中添加了一个新节点,其路径为所选的package.json文件,并在新节点下建立了一个脚本树。

  2》重新构建一棵树

    切换到所需节点并单击工具栏上刷新的。

  3》按树名排列树中的脚本

    点击工具栏上的设置菜单,选择排序方式,然后选择名称。 默认情况下,树会按照package.json中定义的顺序(选项定义顺序)显示脚本。

  4》运行一个脚本

    双击脚本。 在树中选择脚本,然后按Enter或在上下文菜单上选择运行<script name>。选择Start

  5》运行几个脚本

    使用多重选择模式:按住Shift键(对于相邻的项目)或Ctrl(对于不相邻的项目)键并选择所需的脚本,然后在选择的上下文菜单上选择运行或调试。

001-使用idea开发环境安装部署,npm工具栏,脚本运行的更多相关文章

  1. 001、JAVA开发环境安装与eclipse软件第一印象

    折腾了快1个星期,一直没有成功装好JAVA环境,eclipse一直打不开,java环境配置的问题真是不得不吐槽一下,太烂了.今天反反复复折腾好久,终于搞定了.用的金山毒霸,方法如下: 一.打开金山毒霸 ...

  2. legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解(Vagrant + Homestead)

    legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解(Vagrant + Homestead) 一.总结 一句话总结: 1.安装的话就是下载好git,va ...

  3. Nginx+Python+uwsgi+Django的web开发环境安装及配置

    Nginx+Python+uwsgi+Django的web开发环境安装及配置 nginx安装 nginx的安装这里就略过了... python安装 通常系统已经自带了,这里也略过 uwsgi安装 官网 ...

  4. MAC开发环境安装

    MAC开发环境安装 安装sancha cmd: 安装: https://www.sencha.com/products/extjs/cmd-download/ cmd运行 $ open .bash_p ...

  5. Linux 桌面玩家指南:18. 使用 Docker 隔离自己的开发环境和部署环境

    特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...

  6. 三、安装cmake,安装resin ,tars服务,mysql 安装介绍,安装jdk,安装maven,c++ 开发环境安装

    三.安装cmake,安装resin 2018年07月01日 21:32:05 youz1976 阅读数:308   开发环境说明: centos7.2 ,最低配置:1核cpu,2G内存,1M带宽 1. ...

  7. windows/Linux下设置ASP.Net Core开发环境并部署应用

    10分钟学会在windows/Linux下设置ASP.Net Core开发环境并部署应用 创建和开发ASP.NET Core应用可以有二种方式:最简单的方式是通过Visual Studio 2017 ...

  8. React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

    [React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...

  9. Laravel本地环境搭建:Homestead开发环境的部署

    Laravel框架在php开发过程是不断进行优化的,当然也包括了本地环境的开发,下面我们就来具体看看laravel框架中的Homestead 开发环境的部署内容. 首先白以下几个概念 VirtualB ...

随机推荐

  1. 【我要学python】MethodType和isinstance和Type函数

    一.首先来看isinstance: a=6 isinstance(a,int) #返回Ture isinstance(a,str) #返回False isinstance (a,(str,int,li ...

  2. 如何用jmeter对websockt和protobuf进行压力测试

    参考代码:https://github.com/hutao722/kekexinxin 这是基于Jmeter WebsocketSampler的插件,支持对基于websocket和protobuf的服 ...

  3. [BZOJ4818][SDOI2017]序列计数(动规+快速幂)

    4818: [Sdoi2017]序列计数 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 972  Solved: 581[Submit][Status ...

  4. 【动态规划】windy数

    BZOJ1026: [SCOI2009]windy数 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 7893  Solved: 3559[Submit] ...

  5. python基础之条件判断和循环

    1.条件判断 age = 3 if age >= 18: print('adult') elif age >= 6: print('teenager') else: print('kid' ...

  6. Codeforces Round #339 (Div. 1) C. Necklace 构造题

    C. Necklace 题目连接: http://www.codeforces.com/contest/613/problem/C Description Ivan wants to make a n ...

  7. Ubantu配置protoc2.5.0

    首先得到 protobuf 相应的包文件 ,在终端上输入如下 wget http://protobuf.googlecode.com/files/protobuf-2.5.0.tar.gz 下载完毕后 ...

  8. Linux设备文件简介

    转:http://www.360doc.com/content/11/0418/00/5087210_110410837.shtml 版权声明 本 文作者是一位自由软件爱好者,所以本文虽然不是软件,但 ...

  9. Android内存优化11 内存泄漏常见情况2 内部类泄漏

    线程持久化 Java中的Thread有一个特点就是她们都是直接被GC Root所引用,也就是说Dalvik虚拟机对所有被激活状态的线程都是持有强引用,导致GC永远都无法回收掉这些线程对象,除非线程被手 ...

  10. PHP常用库函数介绍+常见疑难问题解答

    来源:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/19/3086858.html 虽然PHP在整体功能上不如Java强大,但相比PHP而言 ...