文章目录

百度百科简介
为什么会有node.js？
NodeJS安装
设置包路径
安装cnpm
安装webpack
webpack 打包案例
webpack-dev-server
安装vue-cli
安装所有模块
启动项目
添加Google调试工具->vue-devtools
安装Element UI
打包上线

百度百科简介

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好. Node是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

为什么会有node.js？

传统意义上的 JavaScript 运行在浏览器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，这样就可以使用javascript去编写一些服务端的程序，这样也就实现了用javaScript去开发 Apache + PHP 以及 Java Servlet所开发的服务端功能，这样做的好处就是前端和后端都采用javascript，即开发一份js程序即可以运行在前端也可以运行的服务端，这样比一个应用使用多种语言在开发效率上要高，不过node.js属于新兴产品，一些公司也在尝试使用node.js完成一些业务领域，node.js基于V8引擎，基于事件驱动机制，在特定领域性能出色，比如用node.js实现消息推送、状态监控等的业务功能非常合适。

NodeJS安装

下载地址:Node.js中文网
下载完毕后,选择安装目录,默认安装即可,安装完毕后,测试path和npm是否安装成功.

node -v // 检测node的版本
npm -v  // 检测npm包管理器的版本

设置包路径

包路径就是npm从远程下载的js包所存放的路径。
使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）

NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules，为了方便对依赖包管理，我们将管理包的路径设置在单独的地方，本教程将安装目录设node.js的目录下，创建npm_modules和npm_cache，执行下边的命令：本教程安装node.js在D:\Program Files\nodejs下所以执行命令如下：

npm config set prefix "D:\MyApp\nodejs\node_moduless"
npm config set cache "D:\MyApp\nodejs\npm_cache"

此时再使用 npm config ls 查询NPM管理包路径发现路径已更改
可以安装一个模块来看看是否生效,我们安装最常用的express模块.

npm install express -g     // -g是全局安装的意思

这个时候打开配置文件,我们可以看到express文件夹,说明配置成功.

安装cnpm

npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像下边我们来安装cnpm：有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令，进行全局安装淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装后，我们可以使用以下命令来查看cnpm的版本 cnpm -v,也可以通过nrm ls查看镜像指向地址,这时候会报两个命令找不到. cnpm命令想要使用需要在配置path

NODE_HOME=D:\MyApp\nodejs
PATH=%NODE_HOME%;%NODE_HOME%\node_moduless

nrm命令想要使用需要进行安装,这是时候就可以使用cnpm来安装,命令 cnpm install -g nrm
安装完nrm后就可以使用nrm use taobao切换镜像来加快下载

安装webpack

全局安装

//全局安装
npm install webpack -g 或 cnpm install webpack -g

安装指定版本

npm install webpack@3.6.0 -g  或 cnpm install webpack@3.6.0 -g

测试
在cmd状态输入webpack，出现如下提示说明 webpack安装成功

webpack 打包案例

分模块开发js module.exports.page=page
指定程序入门js main.js,并引入模块 let {page} = require('./module/page')
使用webpack命令进行打包 webpack main.js builder.js 是否打包成功可以查看builder.js是否存在

webpack-dev-server

webpack-dev-server开发服务器，它的功能可以实现热加载并且自动刷新浏览器。

安装webpack-dev-server
使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。注意是在要使用的项目中运行

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。

devDependencies：开发人员在开发过程中所需要的依赖。 scripts：可执行的命令

配置webpack-dev-server
在package.json中配置script

"scripts": {"dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
},

–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

配置webpack.config.js

webpack.config.js是webpack的配置文件。在此文件中可以配置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin插件。
html-webpack-plugin的作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。

var htmlwp = require('html‐webpack‐plugin');
module.exports={entry:'./src/main.js', //指定打包的入口文件output:{path :__dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径filename:'build.js' //输出文件},devtool: 'eval‐source‐map', //debug断点调试, 在js中跟踪代码的位置上添加debugger就可以进行调试了plugins:[new htmlwp({title: '首页', //生成的页面标题<head><title>首页</title></head>filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)})]
}

注意webpack会把我们源码进行打包,我们就无法在浏览其中跟踪源码,这个时候想要断点调试就需要在webpack.config.js中添加 devtool: 'eval‐source‐map',并在需要调试的位置通过 debugger 代码来代替断点,项目运行到就回在该位置进行停顿.鼠标移动上去就可以看到对应的信息了.

使用webpack的命令去运行程序

npm run dev

安装vue-cli

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅Vue CLI 的文档。
命令行执行 :

npm install -g vue-cli //1.x和2.x加-g是安装到全局
npm install -g @vue/cli or yarn global add @vue/cli //新版安装方式
//测试是否安装成功 3.x之前 vue -V  注意是大V  3.x之后 vue --version
//使用脚手架工具构建项目
vue init webpack vue-demo 使用命令行界面
//vue ui 使用图形化界面

vue-demo 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。
当然还会有很多选项需要你确定,需要的yes就OK了,生成完毕后,最终呈现的目录结构如下图所示:

安装所有模块

npm install

npm install ：安装所有的模块，如果是安装具体的哪个个模块，在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装（这个文件里面是不允许有任何注释的），每个使用npm管理的项目都有这个文件，是npm操作的入口文件。因为是初始项目，还没有任何模块，所以我用npm install 安装所有的模块。安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。

启动项目

启动方式一: cmd 运行如下命令

npm run dev

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js

还有，如果本地调试项目时，建议将build 里的assetsPublicPath的路径前缀修改为 ’ ./ '（开始是 ’ / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ’ / ’ 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

启动方式二: webstorm工具运行项目

添加Google调试工具->vue-devtools

谷歌访问助手
下载地址：http://www.ggfwzs.com/
下载的压缩包解压之后有一个**.crx** 文件以及一个使用教程，小伙们可以按照这个教程进行安装。安装之后，你的浏览器会多一个谷歌访问助手的插件。点击插件会弹出一个面板，上面有一个调整拓展程序商店的链接，点击调整之后你会打开一个和chrome商店一样的页面，在这上面你可以随心所欲安装你的插件。
当我们添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息。

安装Element UI

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,所以饿了吗推出了基于VUE2.0的组件库,提供现成的PC端组件.这个组件库的名称叫做element-ui,基于Vue2.0开发,提供了丰富的PC端组件。
框架的使用方法,大同小异,一般是导入相关文件,需要使用什么组件就查阅该组件的说明文档
安装命令:

cnpm install -g  element-ui -S

打包上线

注意，自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后，可以输入npm run build 来进行打包工作。

npm 开启了 npm run dev 以后怎么退出或关闭？ ctrl+c
--save-dev 自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
–save-dev 与 --save 的区别
--save 安装包信息将加入到dependencies（生产阶段的依赖）
--save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。
项目上线时，只需要将 dist 文件夹放到服务器就行了

NodeJS 简单使用相关推荐

叁拾贰- NodeJS简单代理池（有完没完？）之 SuperAgent 使用代理不是 Timeout 的 Timeout
1.绝望当我以为上篇已经完了的时候,跟女朋友在全城封闭期间偷偷冒险外出吃个麦当劳回来后发现,还是一样 TCP 数慢增: 前文链接: 叁拾壹- NodeJS简单代理池(合) 之 MongoDB 链接数 ...
Centos安装Nodejs简单方式
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时.本文主要讲的是如何在Linux即Centos上安装Nodejs的简单方式,有比设置环境变量更加简单的方式,那就是设 ...
nodejs简单层级结构配置文件
在NodeJS中使用配置文件,有几种比较不错的方案: 第一种:文件格式使用json是毋容置疑的好方案.格式标准,易于理解,文件内容读取到内存之后,使用JSON的标准分析函数即可得到配置项. 第二种:将 ...
js：nodejs简单的Http服务器搭建
一,用过一个nodejs平台,搭建简单的Http服务器 Node.js不是一种独立的语言,也不是javaScript框架,Node.js是一个让javaScript运行在服务端的开发平台,node.j ...
nodejs简单学习
简单了解了一下前端的node.js 开发工具 webstorm 同时需要下载安装node.js 下面是简单代码测试首先使用webStorm创建一个项目然后在项目创建Server.js let ht ...
Nodejs简单介绍以及在windows环境下安装与配置流程
简介一. Nodejs是什么? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. ...
nodejs简单介绍
Nodejs的特性 J Nodejs基于Javascript语言,Nodejs框架是基于Chrome的V8引擎的运行时,是目前速度最快的 Javascript引擎. J Nodejs标准的web开发框 ...
websocket 学习--简单使用，nodejs搭建websocket服务器，到模拟股票，到实现聊天室
websocket简介: WebSocket协议是 HTML5 开始提供的一种基于TCP的一种新的全双工通讯的网络通讯协议.它允许服务器主动发送信息给客户端. 和http协议的不同?? HTTP 协议 ...
nodejs进入mysql数据库_nodejs简单访问及操作mysql数据库的方法示例
本文实例讲述了nodejs简单访问及操作mysql数据库的方法.分享给大家供大家参考,具体如下: var mysql = require('mysql'); //调用MySQL模块 mysql模块要安 ...

NodeJS 简单使用