-
2021-07-13 10:20:39
一、安装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:30windows环境搭建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/1028964685.设置环境变量(非常重要)
说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径
1、鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
2、修改系统变量PATH
新增系统变量NODE_PATH
6安装Vue
cnpm install vue -g
7安装vue命令行工具,即vue-cli 脚手架
cnpm install vue-cli -g8下载webstorm
http://www.jetbrains.com/webstorm/
并启动9.创建vue项目
11:运行测试
在package.json 点击右键 【show npm script 】
双击
访问http://localhost:8080 -
vue开发环境搭建(WebStorm)
2020-04-09 09:40:51vue开发环境搭建(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:59react+webpack+webstorm环境搭建那点事儿一.安装稳定版node.js(已集成npm),安装新版的webstorm 坑 : 1.cmd中配置npm的路径 例如: npm config set prefix "d:\nodejs\node_global" npm config set cache "d:\... -
react 之环境搭建(使用webstorm)
2019-05-08 11:01:33使用webstorm搭建react(五步) 步骤一: webStorm中配置node.js。 (参考上一篇文章 ) 步骤二:管理员权限打开webstorm。 (很重要) 步骤三:安装react官方脚手架。 在terminal终端输入npm install -g create-... -
vue+webstorm环境搭建及新建项目注意事项
2019-04-19 11:23:551.安装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:451.webstorm的安装,webstorm属于整个 IntelliJ IDEA当中的一员,主要用来处理前端代码的,以前从没用过,坑爹的是这个编辑器貌似没有免费社区版的,所以只能自己想办法激活了。 2.vue环境安装 2.1、win+r,cmd进入... -
webstorm搭建vue环境以及通过webpack模板搭建项目流程
2017-08-19 11:01:19webstorm搭建vue环境以及通过webpack模板搭建项目流程 -
在WebStorm中安装Vue环境
2019-05-30 15:52:08webstorm node npm webpack vue-cli webstorm WebStorm 是jetbrains公司旗下一款JavaScript 开发工具,与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。软件官网为... -
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 + ... -
Grafana开发环境搭建
2021-01-08 05:09:53Grafana开发环境搭建(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... -
windows下webstorm+nodejs环境搭建
2018-03-05 18:34:061、安装webstorm2、安装nodejs官网下载windows 64位msi安装包,https://nodejs.org/en/download/安装后测试是否安装成功:安装express,输入命令”npm install -g express”3、创建node应用文件》new》project选择... -
webstorm前端环境搭建-SMIC
2017-07-17 10:05:321.下载并安装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新建一个...