IDEA开发React环境配置
<h3>概述</h3><p>习惯了IDEA写代码，也不想在下一个webstorm，而且IDEA是webstorm的父集，webstorm能干的，IDEA应该也是可以的。本篇随便记录下idea下的react的环境搭建。</p>
<h3>环境</h3>
<p>windows 10</p>
<p>intellij IDEA 2017.3</p>
<p>node.js 9.9</p>
<h3>安装</h3>
<p>node.js安装基本是傻瓜操作，在这不详细描述。安装完后，windows已经默认有node环境配置。</p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507132627320-847577205.png" alt=""></p>
<p>因为npm的镜像是国外的，除非你能FQ，否则一般是安装不了，能的话安装也会非常缓慢。但国内阿里开发的淘宝npm镜像，就能满足我们的需求。win + R 输出cmd打开黑窗口 npm install -g cnpm --registry=https://registry.npm.taobao.org 等待安装</p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507104709206-1412647735.png" alt=""></p>
<p>出现这个就证明安装成功</p>
<h3><strong>intellij IDEA</strong></h3>
<p>直接去官网下载，如果是免费版的可能会出现无法安装的情况，所以建议下完整版的。激活的话，有条件购买正版，学生党之类自己想办法（你懂的）</p>
<p>进入IDEA后，ctrl + alt + s 如果没安装node.js是没有这个插件的，现在我们安装插件</p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507105201938-1593314281.png" alt=""></p>
<p>在file > setting > plugins 然后手动点击Browe rep....</p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507105437085-1911788761.png" alt=""></p>
<p>在搜索里找nodejs</p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507105531297-356941909.png" alt=""></p>
<p>安装完，重启IDEA就能找到上图的<strong>node.js and npm</strong></p>
<p>还得在黑窗口运行 <code class="java">npm install -g create-react-app搭建react脚手架,然后新建一个react项目</code></p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507133154873-61373559.png" alt="" width="761" height="600"></p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507133248152-1626212844.png" alt="" width="753" height="600"></p>
<p>然后等待。。。下载一些核心依赖包，出现下面文字就成功了</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into </span><span style="color: rgba(0, 0, 255, 1)">static</span> files <span style="color: rgba(0, 0, 255, 1)">for</span><span style="color: rgba(0, 0, 0, 1)"> production.
npm test
Starts the test runner.
npm run eject
Removes </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)"> tool and copies build dependencies, configuration files
and scripts into the app directory. If you </span><span style="color: rgba(0, 0, 255, 1)">do</span> <span style="color: rgba(0, 0, 255, 1)">this</span>, you can’t go back!<span style="color: rgba(0, 0, 0, 1)">
We suggest that you begin by typing:
cd dragtest
npm start
Happy hacking</span>!<span style="color: rgba(0, 0, 0, 1)">
Done</span></pre>
</div>
<p>接下去就是运行npm</p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507133805557-1137032941.png" alt="" width="925" height="600"></p>
<p>成功跑起来啦。。</p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507133857318-1604582084.png" alt=""></p>
<p>看浏览器，搭建成功</p>
<p><img src="https://img2018.cnblogs.com/blog/1333075/201905/1333075-20190507135739234-1755955206.png" alt=""></p>
<p>最后，初学react可看下《react入门实例》</p>
<p>======================================================</p>
<p><strong>如发现错误，请及时留言，lz及时修改，避免误导后来者。感谢！！！</strong></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/dslx/p/10824087.html
頁:
[1]