NodeJS 简单使用

最新推荐文章于 2024-08-24 11:02:04 发布

CDHong.it

最新推荐文章于 2024-08-24 11:02:04 发布

阅读量379

点赞数

分类专栏： Java基础

本文链接：https://blog.csdn.net/u010158540/article/details/90474259

版权

Java基础专栏收录该内容

28 篇文章 6 订阅

订阅专栏

文章目录

百度百科简介
为什么会有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 文件夹放到服务器就行了