Node.js和NPM 介绍

最新推荐文章于 2024-04-23 20:25:37 发布

Hgrtea

最新推荐文章于 2024-04-23 20:25:37 发布

阅读量369

点赞数 1

本文链接：https://blog.csdn.net/Hgrtea/article/details/95049626

版权

Node.js的一些概念

1.首先 Node.js 不是一门语言
2.Node.js 不是库，不是框架
3.Node.js 是一个JavaScript 运行时环境
4.简单来讲就是Node.js 可以解析和执行JavaScript 代码
5.以前只有浏览器可以解析执行JS代码
6.现在JS可以完全脱离浏览器来运行，这要归功于Node.js

npm 包管理器

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

package.json 包说明文件

我们建议每一个项目都要有一个 package.json 文件(包描述文件,就像产品说明书一样)
这个文件可以通过 npm init 的方式自动初始化出来,在黑窗口操作例如下：

PS C:\Users\SHEN-MOU-MOU\Desktop\NPMDemo> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (npmdemo)
version: (1.0.0)
description: 这是一个测试的项目（项目解释）
entry point: (index.js) main.js 指定入口文件
test command:   测试没有直接回车
git repository:    git仓库地址
keywords: 关键字回车跳过
author: shenmoumou 作者
license: (ISC)  开源许可证 回车跳过
About to write to C:\Users\SHEN-MOU-MOU\Desktop\NPMDemo\package.json:

{
  "name": "npmdemo",
  "version": "1.0.0",
  "description": "这是一个测试的项目",
  "main": "main.js",  
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "shenmoumou",
  "license": "ISC"
}


Is this OK? (yes) yes


PS C:\Users\SHEN-MOU-MOU\Desktop\NPMDemo> npm install jquery --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN npmdemo@1.0.0 No repository field.

+ jquery@3.3.1
added 1 package from 1 contributor and audited 1 package in 16.365s
found 0 vulnerabilities

对应咱们目前来讲最有用的是package.json文件中dependencies选项可以用来帮我们保存
第三方包的依赖信息。
如果在生产 package.json 文件时，都采用默认设置，不想让他询问使用 npm init -y

建议每个项目的根目录下都有一个 package.json 文件
建议执行 npm install 包名的时候都加上 --save 这个参数,目的是用来保存依赖信息

例如: npm install jquery --save
如果你的 node_modules 删除了也不用担心,我们只要 npm install 就会自动把 package.json 中的

dependencies中所有的依赖项目都下载回来(前提是package.json文件没删除)

npm命令行工具

npm 的第二层含义就是一个命令行工具,只要你安装了node 就已经安装好了 npm
npm 也有版本这个概念, 可以通过在命令行中输入 npm --version 即可查看
输入 npm install --gloabal npm 可以升级npm。

npm 常用命令

npm init 生成package.json 文件
npm init -y 可以跳过向导,快速生成package.json 文件
npm install 安装所有package.josn文件中所有依赖的第三方包
npm install 包名只下载不在package.json文件中添加依赖信息
npm install 包名 --save 下载并在package.json文件中添加依赖信息在dependencies中
npm install 包名 --save-dev 下载并在package.json文件中添加依赖信息在devDependencies中
npm install --save-dev 包名@2.8.1 下载指定版本的包 @后面就是包的版本号
npm uninstall 包名删除下载的第三方包
npm uninstall --save 包名删除第三方包,并把package.json 文件中的依赖信息也删除
npm --help 查看命令使用帮助
npm uninstall --help 查看具体这个命令的使用
npm info 包名可以查看包的信息比如版本信息
npm view jquery versions 或 npm view versions --json 查看包的所有版本号
npm list jquery 查看本地安装的包
npm ls jquery -g 查看全局安装的包

npm安装依赖
【npm install xxx】利用 npm 安装xxx依赖到当前命令行所在目录
【npm install xxx -g】利用npm安装全局依赖xxx
【npm install xxx –save】安装并写入package.json的”dependencies”中
【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中
npm 删除依赖
npm uninstall 模块：删除模块，但不删除模块留在package.json中的对应信息

npm uninstall 模块 --save 删除模块，同时删除模块留在package.json中dependencies下的对应信息

npm uninstall 模块 --save-dev 删除模块，同时删除模块留在package.json中devDependencies下的对应信息

解决npm下载速度慢的问题

可以使用cnpm 淘宝的镜像  http://npm.taobao.org/
淘宝开发团队把npm在国内做了一个镜像备份
所以我们可以安装淘宝的cnpm
npm install cnpm --global  注意:在任意目录执行这个命令都可以
--rglobal 表示全局安装
安装好了后,你再安装第三方包的时候,可有使用 cnpm
例如: cnpm install vue --save

如果不想安装cnpm又想用淘宝的服务器来下载包

可以在后面加上参数 --registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org
但是每次后面都加参数比较麻烦,我们可以把参数设置到npm的配置文件中,
npm config set registry https://registry.npm.taobao.org
使用上面的命令设置后,那以后 使用 npm install 包名 都是从淘宝服务器下载包
可以通过 npm config list 查看是否配置成功

使用Vue-cli 脚手架搭建Vue项目

vue-cli 是 vue 官方提供的脚手架工具
github: https://github.com/vuejs/vue-cli
作用: 从 https://github.com/vuejs-templates 下载模板项目

创建 vue 项目
npm install -g vue-cli      //安装官方提供的脚手架工具  -g 这个参数是全局安装
vue init webpack vue_demo    //这里常用的有两套项目模板 webpack 和 webpack-simple
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/

使用Vue-cli 脚手架搭建Vue项目的具体步骤

  

    •	cd 目录(你要把项目放在哪个目录)；
•	vue init webpack pname(你的项目名字)；
  •	? Project description (A Vue.js project) vue-cli新建项目(项目描述)；
•	? Author (xhdx <zhuming3834@sina.com>) ；zhuming3834@sina.com(项目作者)；
  •	? Vue build 
❯ Runtime + Compiler: recommended for most users 
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 
这里选择Runtime + Compiler: recommended for most users；
  •	? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；
  •	? Use ESLint to lint your code? (Y/n) y 是否使用ESLint，这里根据需求选择；
  •	? Pick an ESLint preset (Use arrow keys) 
  ❯ Standard (https://github.com/feross/standard) 
  Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 这里选择Standard (https://github.com/feross/standard) 
  •	? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；
  •	Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；
  •	cd pname(项目目录)；
  •	npm install 安装依赖；
  •	npm run dev 本地运行项目
  结果
  默认浏览器会自动打开http://localhost:8080/#/，出现如下页面： 

  一共13步，一个vue-cli新建的模板项目就运行起来了。

模板项目的结构

|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器

我们可以在 index.js 中修改端口号和是否自动打开浏览器

组件：局部功能界面，或局部功能模块，跟这个模块相关的组成部分（比如CSS,HTML,JS,图片等）都是这个组件的组成部分。
总的来说，
上面全是粘贴的，方便以后查找。

Hgrtea

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Node.js和NPM 介绍

Node.js的一些概念1.首先 Node.js 不是一门语言2.Node.js 不是库，不是框架3.Node.js 是一个JavaScript 运行时环境4.简单来讲就是Node.js 可以解析和执行JavaScript 代码5.以前只有浏览器可以解析执行JS代码6.现在JS可以完全脱离浏览器来运行，这要归功于Node.jsnpm 包管理器npm 是 JavaScript 世界的...
复制链接

扫一扫