精华内容

下载资源

问答

我要提问

webstorm环境搭建
2021-07-13 10:20:39
目录

一、安装webstorm
二、安装 NodeJs
三、设置缓存文件夹及全局模块存放路径
1.设置缓存文件夹
2.设置全局模块存放路径

四、安装依赖
五、启动服务
一、安装webstorm

设置以管理员身份运行此程序：

二、安装 NodeJs

访问Node.js官网https://nodejs.org/en/download/，下载安装包进行安装：

三、设置缓存文件夹及全局模块存放路径

在node.js安装路径下，建node_global和node_cache两个文件夹提供全局和缓存文件

1.设置缓存文件夹
```
npm config set cache “D:\Program Files\nodejs\node_cache”
```
2.设置全局模块存放路径
```
npm config set prefix “D:\Program Files\nodejs\node_global”
```
四、安装依赖
```
npm install
```
建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题：
```
npm install --registry=https://registry.npm.taobao.org
```
五、启动服务
```
npm run dev
```
更多相关内容
React学习一——webstorm环境搭建和React基础语法
2020-08-12 17:31:17
一、环境搭建 Node.js+WebStorm+react.js Node.js 在rTool上搜索node.js,下载安装包打开安装，除了路径，一路next (1) 修改环境变量计算机->属性->高级系统设置->环境变量->系统变量->path...
React

一、环境搭建

Node.js+WebStorm+react.js

1.Node.js
官网下载：https://nodejs.org/en/
参考安装方法：https://blog.csdn.net/antma/article/details/86104068

(1) 修改环境变量

计算机->属性->高级系统设置->环境变量->系统变量->path编辑->将安装路径加入其中

(2) 测试

此时在命令窗口可以执行 node -v 和 npm -v 分别查看node和npm的版本号

(3) 配置npm在安装全局模块时的路径和缓存cache的路径

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间。所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：
```
npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"
```
执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”，值为
“D:\Program Files\nodejs\node_modules”（根据自己的安装路径也可以）

最后编辑用户变量里的Path，将相应npm的路径改为：D:\Program Files\nodejs\node_global（根据自己的安装路径也可以）

(4) 内源配置

npm config rm proxy

npm config rm http-proxy

npm config rm https-proxy

npm config set no-proxy .huawei.com

npm config set registry https://registry.npm.taobao.org

完成配置，完成之后安装一个依赖包测试一下，正常安装即配置ok

2.Webstorm

推荐安装方法（破解方法）：https://blog.csdn.net/qingsongzhinv/article/details/80281352

3.安装并测试react
```
npm install -g create-react-app

create-react-app hello-world

cd hello-world

npm start
```
浏览器输入地址localhost:3000/ 默认端口3000.
出现以下页面则为成功

二、入门学习

1.简介

React.js 是一个帮助你构建页面 UI 的库。React.js帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

注：React.js 不是一个框架，它只是一个库。

附：什么是DOM

DOM即文档对象模型，是指当我们编写前端代码时，会生成一个document对象，通过这个对象我们可以获得页面上的节点，在运行阶段，也会生成DOM树。

2.在webstorm上配置和运行

（1）右上角Add configuration，点击左上角“+”号，点击npm,Scripts设置为run

（2）默认主文件为App.js，可写代码调试

（3）更改程序入口

进入index.js页面，import想要导入的类和地址即可

3.元素渲染

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上（每个组件都需要有render方法，用于输出组件）：

示例：
```
<html>

<head>

<meta charset="UTF-8" />

<title>Hello React!</title>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

 

<div id="example"></div>

<script type="text/babel">

const element =<h1>Hello, world!</h1>;

ReactDOM.render(

    element,

    document.getElementById('example')

);

</script>

 

</body>

</html>
```
4.组件式管理

（1）使用函数定义组件
```
function HelloMessage(props) {

    return <h1>Hello World!</h1>;

}
```
（2）使用ES6 class定义一个组件
```
class Welcome extends React.Component {

  render() {

    return <h1>Hello World!</h1>;

  }

}
```
（3）向组件传递参数
```
<body>

<div id="example"></div>

<script type="text/babel">

function HelloMessage(props) {

    return <h1>Hello {props.name}!</h1>;

}

const element = <HelloMessage name="Runoob"/>;

 

ReactDOM.render(

    element,

    document.getElementById('example')

);

</script>

</body>

（4）       多组件合成组件

<body>

 

<div id="example"></div>

<script type="text/babel">

function Name(props) {

    return <h1>网站名称：{props.name}</h1>;

}

function Url(props) {

    return <h1>网站地址：{props.url}</h1>;

}

function Nickname(props) {

    return <h1>网站小名：{props.nickname}</h1>;

}

function App() {

    return (

    <div>

             <Name name="菜鸟教程" />

             <Url url="http://www.runoob.com" />

             <Nickname nickname="Runoob" />

    </div>

    );

}

 

ReactDOM.render(

     <App />,

    document.getElementById('example')

);

</script>

 

</body>
```
5.State和Props

（1） state：状态（可变）

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）

用来更新和修改数据

（2） props：（不可变）传递数据

6.组件生命周期

（1） Mounting：已插入真实 DOM

（2） Updating：正在被重新渲染

（3） Unmounting：已移出真实 DOM

（4）方法：

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

官方文档：https://reactjs.org/docs/react-component.html#lifecycle-methods

7.Refs

可以通过ref来获取组件的引用
```
class MyComponent extends React.Component {

  handleClick() {

    // 使用原生的 DOM API 获取焦点

    this.refs.myInput.focus();

  }

  render() {

    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs

    return (

      <div>

        <input type="text" ref="myInput" />

        <input

          type="button"

          value="点我输入框获取焦点"

          {this.handleClick.bind(this)}

        />

      </div>

    );

  }

}

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);
```
学习资料推荐

React官方教程：https://react.docschina.org/tutorial/tutorial.html

Ant官网：https://ant.design/index-cn

入门推荐：http://www.ruanyifeng.com/blog/2015/03/react.html
收起
展开全文
webstorm 本地部署环境搭建
千次阅读 2020-05-03 10:36:30

windows环境搭建Vue开发环境 (包括webstorm开发) gwcgwcjava 2018-10-22 21:53:17 1889 收藏 4 展开下载安装node.js 下载地址：https://nodejs.org/en/ 下载界面：点击红框，下载双击安装文件：修改安装路径： ...

windows环境搭建Vue开发环境 (包括webstorm开发)

1.下载node.js
下载地址：https://nodejs.org/en/

2.一直默认设置安装

3.在node.js安装路径下，建node_global和node_cache两个文件夹提供全局和缓存文件

win+R，输入cmd

设置缓存文件夹
npm config set cache “F:\soft\node.js\node_cache”

设置全局模块存放路径
npm config set prefix “F:\soft\node.js\node_global”

4.基于 Node.js 安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org
以上命令够用，其他方式参考：https://blog.csdn.net/zhangjing1019/article/details/102896468

5.设置环境变量（非常重要）

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

2、修改系统变量PATH

新增系统变量NODE_PATH

6安装Vue
cnpm install vue -g

7安装vue命令行工具，即vue-cli 脚手架
cnpm install vue-cli -g

8下载webstorm
http://www.jetbrains.com/webstorm/
并启动

9.创建vue项目

11：运行测试

在package.json 点击右键【show npm script 】
双击
访问http://localhost：8080

收起

展开全文

javascript
vue开发环境搭建（WebStorm）
千次阅读 2020-04-09 09:40:51
vue开发环境搭建（WebStorm） https://blog.csdn.net/u013408061/article/details/88238592 一、安装Node.js，搭建Vue环境 1、访问Node.js官网（https://nodejs.org/en/download/）进行安装包下载。 2、...
vue开发环境搭建（WebStorm）

https://blog.csdn.net/u013408061/article/details/88238592

一、安装Node.js，搭建Vue环境
1、访问Node.js官网（https://nodejs.org/en/download/）进行安装包下载。

2、下载成功之后运行安装程序，进行安装。
如果是用安装程序进行安装，在安装过程中会自动进行Nodejs环境变量的配置，如果是通过其他方式进行安装，可能需要手动配置环境变量。
完成安装后，可以打开命令行，直接使用node命令，进入node.js交互模式。
然后可以输入console.log("Hello,World");测试安装。

3、设置npm的默认安装路径，和缓存路径
// 设置npm安装程序时的默认位置
npm config set prefix "D:\Program Files\nodejs\X64\node_global"
// 设置npm安装程序时的缓存位置
npm config set cache "D:\Program Files\nodejs\X64\node_cache"
然后在把D:\Program Files\nodejs\X64\node_global\node_modules路径添加到环境变量PATH中。

4、安装webpack和vue-cli脚手架
在命令行中执行下列两个命令，进行安装。
npm install webpack -g
npm install vue-cli -g
二、创建vue测试项目
1、打开命令行，进入到希望创建vue测试项目的路径，然后在命令行中执行下列命令，进行项目创建。
vue init webpack vue_test //其中vue_test为项目名称

2、在命令行中进入到项目路径，然后执行npm install命令，安装项目需要的依赖。

安装完成。

3、然后执行npm run dev命令，运行项目。

三、安装WebStom
1、在百度上找一个WebStorm 11的安装包进安装。

2、破解WebStorm 11
把JetbrainsCrack-2.5.3.jar复制到WebStorm的bin目录下。

编辑bin目录下WebStorm.exe.vmoptions和WebStorm64.exe.vmoptions两个文件，在两个文件的第一行增加下列内容。
-javaagent:H:\WebStorm 11.0.3\bin\JetbrainsCrack-2.5.3.jar

然后打开WebStorm就可以完成注册。

四、在WebStorm中打开vue项目
1、在WebStorm中打开刚才创建的vue测试项目，项目的js文件可能会有编译异常。

可以通过在setting文件中修改js版本来解决。

2、在WebStorm中设置项目的快速启动
在WebStorm右上角选择“Edit Configrations”，进入配置界面。

添加一个新的Node.js配置。

在配置界面中配置下图红框中的几个属性即可。
- 点赞 1
- 收藏
收起
展开全文
菜鸡专用 react+webpack+webstorm环境搭建那点事儿
2017-03-03 20:31:59

react+webpack+webstorm环境搭建那点事儿一.安装稳定版node.js(已集成npm)，安装新版的webstorm 坑： 1.cmd中配置npm的路径例如： npm config set prefix "d:\nodejs\node_global" npm config set cache "d:\...

收起

nodejs react webpack
react 之环境搭建（使用webstorm）
千次阅读 2019-05-08 11:01:33

使用webstorm搭建react（五步）步骤一： webStorm中配置node.js。（参考上一篇文章）步骤二：管理员权限打开webstorm。（很重要）步骤三：安装react官方脚手架。在terminal终端输入npm install -g create-...

收起

react
vue+webstorm环境搭建及新建项目注意事项
千次阅读 2019-04-19 11:23:55

1.安装npm 2.安装node.js 3.安装webstorm 4.全局安装webpacknpm install ...环境安装完毕，要是用webstorm新建vue项目还需安装下面两个： 1.安装git，官网地址https://git-scm.com/download/win 安装教程h...

收起
webstorm入门搭建vue
2020-11-26 16:38:45

1.webstorm的安装，webstorm属于整个 IntelliJ IDEA当中的一员，主要用来处理前端代码的，以前从没用过，坑爹的是这个编辑器貌似没有免费社区版的，所以只能自己想办法激活了。 2.vue环境安装 2.1、win+r，cmd进入...

收起

vue
webstorm搭建vue环境以及通过webpack模板搭建项目流程
2017-08-19 11:01:19

webstorm搭建vue环境以及通过webpack模板搭建项目流程

收起

vue
在WebStorm中安装Vue环境
千次阅读 2019-05-30 15:52:08

webstorm node npm webpack vue-cli webstorm WebStorm 是jetbrains公司旗下一款JavaScript 开发工具，与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。软件官网为...

收起

Vue
1.2 环境搭建-WebStorm安装
2020-02-02 22:55:51

一、安装包下载 1、登录JetBrains官网：... 2、点击【Tools】，下拉框中点击WebStorm，如下图： ... ...1、双击WebStorm-2019.3.2.exe开始安装； 2、一路【Next】安装下去； 3、最后勾选"Ru...

收起
Windows7下安装 Nodejs 并在 WebStorm 9.0.1 下搭建编译 LESS 环境的图文教程
2020-09-30 11:42:12

本文通过图文并茂的形式给大家介绍了Windows7下安装 Nodejs 并在 WebStorm 9.0.1 下搭建编译 LESS 环境，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧

收起
Mac电脑使用webstorm安装vue并创建项目
2022-06-07 18:34:40

记住安装的位置检查项目的node.js的环境以及npm的环境是否是刚刚下载的 file -> other Setting -> Run configuration Templates for New Projects -> Node.js -> Node interpreter (->npm->Node interpreter + ...

收起

vue.js macos
Grafana开发环境搭建
2021-01-08 05:09:53

Grafana开发环境搭建（Windows系统） Grafana源码 Grafana版本： 6.5.1 将 Grafana 源码 clone 到本地，源文件较多，如果 github 下载不成功，建议试试 gitee. 下载完成后，打开 grafana 的 package.json 查看对 ...

收起
在webstorm中搭建electron的环境
千次阅读 2018-11-06 18:26:08

当你恰好也用webstorm的时候你还可以这样编辑器的右上角这样三角轻轻一点你的electron 就运行起来了，方块一点你的项目就停止了是不是很方便来来配置第一步在bin下面新建一个electron.js的js...

收起

electron
windows下webstorm+nodejs环境搭建
2018-03-05 18:34:06

1、安装webstorm2、安装nodejs官网下载windows 64位msi安装包，https://nodejs.org/en/download/安装后测试是否安装成功：安装express，输入命令”npm install -g express”3、创建node应用文件》new》project选择...

收起

nodejs
webstorm前端环境搭建-SMIC
千次阅读 2017-07-17 10:05:32

1.下载并安装webstorm，网址：http://www.jetbrains.com/webstorm/ 2.下载安装node.js，网址：https://nodejs.org/en/，选择LTS版本 3.下载并安装tortoise SVN，网址：...

收起
react+webpack+webstorm开发环境搭建
2020-12-21 15:55:15

需要安装的软件node.jsnpm包管理以上两个包的下载地址如下：由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm更换npm库的源由于国内的网络原因，推荐只用阿里的npm源地址构建项目使用webstorm新建一个...

收起

1 2 3 4 5 ... 20

收藏数 3,968

精华内容 1,587

热门标签

关键字：

webstorm环境搭建

友情链接： ppcboot-2.0.0.rar