精华内容
下载资源
问答
  • webstorm环境搭建
    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
    
    更多相关内容
  • 一、环境搭建 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

    展开全文
  • 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环境搭建那点事儿一.安装稳定版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-...
  • 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进入...
  • webstorm搭建vue环境以及通过webpack模板搭建项目流程
  • WebStorm中安装Vue环境

    千次阅读 2019-05-30 15:52:08
    webstorm node npm webpack vue-cli webstorm WebStorm 是jetbrains公司旗下一款JavaScript 开发工具,与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。软件官网为...
  • 一、安装包下载 1、登录JetBrains官网:... 2、点击【Tools】,下拉框中点击WebStorm,如下图: ... ...1、双击WebStorm-2019.3.2.exe开始安装; 2、一路【Next】安装下去; 3、最后勾选"Ru...
  • 本文通过图文并茂的形式给大家介绍了Windows7下安装 Nodejs 并在 WebStorm 9.0.1 下搭建编译 LESS 环境,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
  • 记住安装的位置检查项目的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: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...
  • 1、安装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:32
    1.下载并安装webstorm,网址:http://www.jetbrains.com/webstorm/ 2.下载安装node.js,网址:https://nodejs.org/en/,选择LTS版本 3.下载并安装tortoise SVN,网址:...
  • 需要安装的软件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