1.       nodejs安装

要求:node版本6.2.0及以上,npm版本3.8.9及以上

Nodejs安装包地址:

2.    在rTools上下载并安装git

3.    在rTools上下载安装vscode开发工具

4.    利用npm配置项目环境

1.    Cmd命令窗口执行以下指令

npm config set registry http://mirrors.tools.huawei.com/npm

2.    将前端工程代码clone到本地D:\workspace\NosCloudLab_f

3.    CD 进入该目录,执行指令npm install

进行环境配置

4.    打开vscode,文件->打开文件夹,找到工程目录。在终端执行npm start启动

待启动编译完成,在浏览器地址栏输入以下端口8080地址: http://localhost:8080/

可以在工程的启动过程中看到该地址:

5.    编译打包

在cmd中运行 npm run build进行编译打包,编译完成后,会在根目录下生成dist目录,其下的静态文件即为发布件

6.       部署

将编译打包生成的dist目录下的文件发布到web server(tomcat 或 nginx等)的静态资源目录,启动web server即可.

nodejs前端开发环境安装的更多相关文章

  1. 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  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. 用 Docker 快速配置前端开发环境

    来源于:http://dockone.io/article/1714 今天是你入职第一天. 你起了个大早,洗漱干净带着材料去入职. 签了合同,领了机器,坐到工位,泡一杯袋装红茶,按下开机键,输入密码, ...

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

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

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

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

  8. Web 前端开发环境

    创建 Web 前端开发环境 Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower ...

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

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

随机推荐

  1. luogu2865 路障 (dijkstra)

    求次短路,dijkstra时同时记下到某点的最短距离和次短距离即可. #include<cstdio> #include<cstring> #include<algori ...

  2. 【bzoj3438】 小M的作物

    http://www.lydsy.com/JudgeOnline/problem.php?id=3438 (题目链接) 题意 $n$种作物,每种可以种在A田也可以种在B田,两种种植方法有不同的收益.$ ...

  3. 关于:HTTP Header -> Content-Type: text/plain Cache-Control: no-cache IE浏览器弹出错误下载对话

    下午遇到一个很奇怪的现象,一个网址: http://192.168.1.3/login?action=a&fr=b.com 注意网址后面的参数形式,action参数在前,最后一个参数值的尾部含 ...

  4. typescript泛型(学习笔记非干货)

    软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性. 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型, 这在创建大型系统时为你提供了十分灵活的功能. In softwa ...

  5. PHP的内存限制 Allowed memory size of 134217728 bytes exhausted (tried to allocate 1099 bytes) in

    Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 1099 bytes) in   Fa ...

  6. C++初始化列表(good)

    本文转载自http://www.cnblogs.com/graphics/archive/2010/07/04/1770900.html 感谢作者分享 何谓初始化列表 与其他函数不同,构造函数除了有名 ...

  7. Cleanup failed to process the following paths错误的解决

    在使用TortoiseSVN工具执行Cleanup操作时经常出现Cleanup failed to process the following paths的错误,具体如下图: 网上搜索了一下,找到了解 ...

  8. Cookie浅谈

    相信大家对Cookie多多少少都有点了解吧~~下面我来谈谈吧: 每个Cookie不超过4K数据,每个网站不超过20个Cookie,所有网站的Cookie总和不超过300个 虽然cookie已经是上世纪 ...

  9. GO语言的进阶之路-爬虫进阶之路

    GO语言的进阶之路-爬虫进阶之路 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 网络爬虫是一种自动获取网页内容的程序,是搜索引擎的重要组成部分.我们今天要介绍的就是一个简单的网络爬 ...

  10. 函数和常用模块【day06】:pickle模块(十二)

    本节内容 1.dumps序列化和loads反序列化 2.dump序列化和load反序列化 3.序列函数 1.dumps序列化和loads反序列化 dumps()序列化 1 2 3 4 5 6 7 8 ...