001-使用idea开发环境安装部署

Posted 2020-11-01 木子旭

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或在上下文菜单上选择运行<script name>。选择Start

　　5》运行几个脚本

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