精华内容
下载资源
问答
  • react+webpack+webstorm环境搭建那点事儿一.安装稳定版node.js(已集成npm),安装新版的webstorm 坑 : 1.cmd中配置npm的路径 例如: npm config set prefix "d:\nodejs\node_global" npm config set cache "d:\...

    react+webpack+webstorm环境搭建那点事儿

    一.安装稳定版node.js(已集成npm),安装新版的webstorm

    1.cmd中配置npm的路径 例如:
    npm config set prefix "d:\nodejs\node_global"
    npm config set cache "d:\nodejs\node_cache"

    2.修改环境变量中的node路径:
    新建一个NODE_PATH的键,输入你自己给定的全局存放路径
    新建一个NODE_PATH的键,输入你自己给定的全局存放路径
    这里写图片描述
    同样,用户变量中的PATH路径也要改成和NODE_PATH一直的路径
    administrator中path添加d:\nodejs\node_global;

    npm install webpack -g // 打开cmd全局安装webpack

    3.以上的步骤全部完成以后,打开CMD,输入node,再键入require(‘webpack’)

    二.安装各种依赖项
    打开奇卡无比的webstorm的命令行(左下角T打头的,反正你也不会读)

    npm init -y//初始化
    npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^1.16.2 //安装webpack以及webpack测试服务器,注意版本号
    npm install --save-dev babel-core babel-loader babel-preset-es2015 //安装babel,babel的作用是将es6的语法编译成浏览器认识的语法
    npm install --save-dev css-loader sass-loader style-loader url-loader
     //用来解析css
    
    npm install  react react-dom react-router react-hot-loader  jsx-loader html-webpack-plugin --save-dev 
    //react 

    大致依赖安装如上,具体的按具体需求来;
    webpack以及webpack测试服务器的版本号是整个热重载的关键,别的流程基本和能搜到的文章一模一样,不多bb;此处指定加载1.16.2服务器版本——原因是默认安装的server版本为2以上修改了语法导致,各处写法与文章教程写法不一致,引起报错。
    作为一个懒人加文盲,直接使用老版本吧。
    有兴趣的同学可以通读下webpack官方文档,有好处。
    三.添加文件
    1.照这图抄写目录结构
    这里写图片描述

    2.在抄下个文档内容
    index.js

    var React = require('react');
    var ProductBox;
    ProductBox = React.createClass({
        render: function () {
            return (
                <div className="productBox">
                    hello react&es2015&webpack!!!dsadsadsada
                </div>
            );
        }
    });
    
    module.exports = ProductBox;

    main.js

    let React = require('react');
    let ReactDOM = require('react-dom');
    let AppComponent = require('./index.js');
    ReactDOM.render(<AppComponent />, document.getElementById('content'));

    index.html

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>React Project</title>
    </head>
    <body>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
    <div id="content"></div>
    <script src="./bundle.js"></script>
    <script type="text/javascript" src="bundle.js"></script>
    </body>
    </html>

    .babelrc

    {
      "presets": ["react", "es2015"]
    }

    package.json(可以直接抄了然后npm install,注意于script代码片,且name不能跟我们的模块和项目文件目录同名)

    {
      "name": "1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.23.1",
        "babel-loader": "^6.3.2",
        "babel-preset-es2015": "^6.22.0",
        "babel-preset-react": "^6.23.0",
        "css-loader": "^0.26.2",
        "html-webpack-plugin": "^2.28.0",
        "jsx-loader": "^0.13.2",
        "react": "^15.4.2",
        "react-dom": "^15.4.2",
        "react-hot-loader": "^1.3.1",
        "react-router": "^3.0.2",
        "sass-loader": "^6.0.2",
        "style-loader": "^0.13.2",
        "url-loader": "^0.5.8",
        "webpack": "^2.1.0-beta.25",
        "webpack-dev-server": "^1.16.2"
      }
    }

    webpack.config(注意entry路径已经output路径)

    var path = require('path'),
        webpack = require('webpack'),
        HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
        output: {
            path: path.resolve(__dirname, './build'),
            filename: 'bundle.js'
        },
        devServer: {
            inline: true,
            port: 8099
        },
        module: {
            loaders: [{
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                } //将react编译成js文件
            },
                { test: /\.css$/, loader: 'style-loader!css-loader' },
                //打包css文件
                { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
                //编译sass文件
                { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
                //对图片进行打包
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './build/index.html'
            }),
            new webpack.HotModuleReplacementPlugin()
        ],
    };

    四 收工
    左下方自带命令行输入

    webpack //生成打包bundle.js,若出现UNMET PEER DEPENDENCY对照补上依赖

    若一片绿字儿

    npm run build         //线上目录
    
    npm run dev          // 开发目录

    若还是绿字儿



    那你运气还蛮好的

    http://localhost:8099/index.html //浏览器输入访问

    完工,没次写完按一下ctrl+s保存 浏览器自动刷新,无需在打包。
    如果ctrl都嫌麻烦可以去掉wb设定里的safe write(File->settings->System Settings),随便写一下就自动刷新,卡死你!

    至此一个十分简陋的环境就搭好了,你想自己做一个属于自己的环境吗,
    老实看文档去吧
    调试过程中记得看命令行的红字,其实问题都写在上面,不会就gooooogle一下
    英文不好,不能科学上网的,那就慢慢磨把,总能搭好的,不是吗,要有耐心。

    这里写图片描述

    展开全文
  • 一、环境搭建 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

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

    1.安装npm

    2.安装node.js

    3.安装webstorm

    4.全局安装webpack  npm install webpack -g

    5.全局安装vue手脚架 npm install vue-cli -g

    环境安装完毕,要是用webstorm新建vue项目还需安装下面两个:

    1.安装git,官网地址https://git-scm.com/download/win   安装教程https://blog.csdn.net/orange228/article/details/79365795

    2.安装ij-rpc-client     npm install ij-rpc-client  -g

    现在可以新建项目了:

    1.新建:打开webstorm>新建项目>vue.js>设置项目名称(只能小写),位置与node在同一个盘下。

    2.配置:点击右上角的Edit configuration,点击+ >选择npm >Command=run >Scripts=dev

    3.点击右上角小三角运行。

    展开全文
  • webstorm搭建electron的环境

    千次阅读 2018-11-06 18:26:08
    当你恰好也用webstorm的时候 你还可以这样 编辑器的 右上角 这样三角 轻轻一点 你的electron 就运行起来了,方块一点你的项目就停止了 是不是很方便 来来 配置第一步 在bin下面新建一个electron.js的js...

    之前要运行electron项目的步骤是

    进入项目

    electron .

    当你恰好也用webstorm的时候

    你还可以这样

    编辑器的 右上角  这样三角 轻轻一点 你的electron 就运行起来了,方块一点你的项目就停止了

    是不是很方便

    来来 配置第一步

    在bin下面新建一个electron.js的js文件(暂时是空的哦~~~~)

     

    右上角找到Edit Configurations ,点击 它(轻点哦~~~)

    左上角 加号 增加一个  之后配置好 javacript file 的文件路径就是你的electron项目路径(里面包含html,package.json配置文件以及main.js的入口文件)

    之后点击 Apply

    再点击 ok

    出来之后  进入到electron.js文件中

    var exec = require('child_process').exec
    exec('electron ../jy-factory/electron/.')

    写一个子路由

    之后点击三角开始 很方便的运行吧

    展开全文
  • webstorm自带less,不过要编译的话需要nodejs环境。 首先去node的主页下载对应版本的nodejs然后安装,下载地址:http://nodejs.org/ 安装完之后打开命令提示符(win+r),分别输入node -v以及npm -v如果返回版本...
  • webstorm编译环境搭建

    2021-07-13 10:20:39
    一、安装webstorm 二、访问Node.js官网https://nodejs.org/en/download/,下载安装包进行安装: 三、设置缓存文件夹及全局模块存放路径 在node.js安装路径下,建node_global和node_cache两个文件夹提供全局和缓存...
  • webstorm入门搭建vue

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

    千次阅读 2019-06-01 09:22:55
    工具安装 首先安装一些必要的工具,由于npm的源都是在国外的地址,所以安装会比较慢,可以使用淘宝的国内镜像...2、然后安装全局vue-cli脚手架,用于帮助搭建所需的Vue的开发模板框架。命令如下: cnpm install ...
  • webstorm 快速搭建react项目

    万次阅读 2018-03-07 10:07:49
    强烈推荐30个原生JavaScript的demo,包括canvas时钟特效、自定义视频...前端新手如何安装webstorm ,初步搭建react项目 下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了。(存微信收藏、、) ...
  • webstorm自带less,不过要编译的话需要nodejs环境。 首先去node的主页下载对应版本的nodejs然后安装,下载地址:http://nodejs.org/ 安装完之后打开命令提示符(win+r),分别输入node -v以及npm -v如果返回版本...
  • webstorm搭建vue环境以及通过webpack模板搭建项目流程
  • 1、WebStorm编译依赖于gradle,WebStorm编译过程中自动下载,时间较长   2、Android版本不对,WebStorm创建工程生成的Android版本高,需要在Android SDK Manager中下载 3、Android SDK版本统一,platform...
  • WebApp Ionic +webStorm开发 环境搭建

    千次阅读 2017-06-25 02:04:17
    在网上看了一大推,没一个能完整的写出来的。结合了他们的 整合了一下 “` 系统:win7 ...准备:webStorm,下载地址 下载并且安装Node.js(https://nodejs.org/en/) 打开终端,安装cordova npm install
  • Atom和Webstorm开发环境搭建

    千次阅读 2016-04-24 11:06:30
    今天再折腾了一下开发环境,记录一下。 一、Atom 配置C/C++开发环境   autocomplete-clang   linter-clang 二、Atom 配置Golang开发环境  go-plus   这个插件非常好用,安装后,初步建项目时,...
  • WebStorm 之 Cordova 环境搭建 原文:WebStorm 之 Cordova 环境搭建一、环境搭建  Cordova 环境配置之前,应先下载安装 Node.js ,中文官网:http://nodejs.cn/。  以管理员身份运行 cmd 命令行...
  • 这里推荐使用 WebStorm,作为一个 IDE(集成开发环境),它有非常强大的代码补全,而且其补全相当智能,提高了开发效率。还能与 Google Chrome 浏览器配合,完成实时编辑和调试功能。当然你可以有

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,605
精华内容 1,442
关键字:

webstorm环境搭建