1. 下载node.js

https://nodejs.org/en/

2. 安装 webpack

用管理员开个命令行 (mac: open terminal)

npm install webpack -g

3. 下载webstorm

https://www.jetbrains.com/webstorm/

注册：http://idea.qinxi1992.cn/

4. 进入项目path

输入(拖入path到terminal)

npm install

会自动帮你把所有依赖全部安装

5. 调试、发布

调试： npm start 表示启动一个服务开发他，就是开发模式。打开 http://localhost:3000/  就可以看效果了。你改的任何代码 只要保存一下 页面就自动变了 不需要刷新(webpack-hot)。

发布：npm run deploy:prod

前端开发环境webstorm搭建的更多相关文章

  1. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  2. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  3. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  4. 转：【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  5. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  6. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

  7. 用grunt搭建自动化的web前端开发环境

    用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...

  8. Grunt搭建自动化web前端开发环境--完整流程

    Grunt搭建自动化web前端开发环境-完整流程 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前 ...

  9. webpack 4.x之搭建前端开发环境

    webpack是一个现代JavaScript应用程序的静态模块打包器,借用官网的一张图,它能够将一些预处理语言,js的最新语法转换成浏览器识别的内容.现在一般的前端框架都有比较成熟的脚手架,大多数对w ...

随机推荐

  1. MyBatis模糊查询不报错但查不出数据的一种解决方案

    今天在用MyBatis写一个模糊查询的时候,程序没有报错,但查不出来数据,随即做了一个测试,部分代码如下: @Test public void findByNameTest() throws IOEx ...

  2. Is-a

    在知识表示.面向对象程序设计与面向对象设计的领域里, is-a(英语:subsumption,包含架构)指的是类的父子继承关系, 例如类D是另一个类B的子类(类B是类D的父类). 换句话说,通常&qu ...

  3. html总结：float实现span和input输入框同行

    例: <input type="text" name="ytdwname" value="<%=user.getYtdwname() %& ...

  4. Jenkins redeploy artifacts

    jenkins redeploy artifacts 按钮 - 开源中国https://www.oschina.net/question/3045293_2247829 Jenkins 构建失败后通过 ...

  5. react render

    实际上react render方法返回一个虚拟dom 并没有去执行渲染dom 渲染的过程是交给react 去完成的 这就说明了为什么要在所有数据请求完成后才去实现render 这样做也提高了性能.只调 ...

  6. [转帖]浅谈程序中的text段、data段和bss段

    作者:百问科技链接:https://zhuanlan.zhihu.com/p/28659560来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 一般情况,一个程序本质上都 ...

  7. vue小问题库

    引入vue组件命名时,不用特殊标签,比如<head>,不然会按特殊标签处理

  8. vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址

    一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...

  9. logback框架之——日志分割所带来的潜在问题

    源码: logback-test.xml文件如下,有2个需要我们重点关注的参数: fileNamePattern:这里的日志文件名变动的部分是年月日时,外加1个文件分割自增变量,警告,年月日时的数值依 ...

  10. 在eclipse中spring的xml配置文件标签中class路径全限定名自动提示设置

    这个自动提示其实很简单,没有网上说的那些要在help下的Install中输入网址来下载更新一堆东西那么复杂. 只需要打开Help — — >Eclipse Marketplace... 然后在该 ...