001-使用idea开发环境安装部署,npm工具栏,脚本运行

一、概述

  参看官方文档: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或在上下文菜单上选择运行

你可能感兴趣的:(001-使用idea开发环境安装部署,npm工具栏,脚本运行)