vue.js学习笔记(一)

目录

 

第一章:npm包管理工具

1.1 什么是npm

1.2 npm 初始化项目

1.3 通过npm安装模块

1.3.1 安装方式

1.3.2 生产/开发环境模块安装

1.4 批量下载模块

1.5 查看模块命令


第一章:npm包管理工具

1.1 什么是npm

npm(node package manager):javaScript包管理工具,并且是node.js平台的默认包管理工具,通过npm可以安装,共享,分发代码,管理项目的依赖关系。-----可以说npm相当于前端的maven

最新版本的node.js已经集成了npm工具,所以必须在本机安装node.js环境(官网下载)

检查是否安装成功,win+r  cmd 输入下面的命令,显示版本号,说明安装成功了

node -v 
npm -v

1.2 npm 初始化项目

npm init 命令初始化项目

1)创建一个npm-demo文件夹,通过命令提示窗口进入到当前文件,执行 npm init 初始化项目

2)初始化之后,会在上面提示的E:\h5\npm-demo\package.json中写入,这些初始化信息

3)如果,这些初始化信息,你都使用默认的,那就可以直接使用命令 npm init -y  就可以跳过设置的部分,直接初始化完成

 

1.3 通过npm安装模块

1.3.1 安装方式

npm install 命令用于安装某个模块,安装方式分为:本地安装(local),全局安装(global)两种。

1)本地安装

将js库安装到当前执行命令时所在的目录(注:指定版本号,必须是该模块存在的)

npm install <module name模块名称>[@版本号]

例如:安装express(基于node.js平台的web开发框架),执行如下命令

npm install express  这里没有指定版本号

所安装模块的相关依赖也会一并下载下来,所以会看到(如下图),除了我们下载的模块以外,还有很多其他的模块

安装之后,在项目目录下,会多出一个package-lock.json,其实就是列出了当前下载的模块的具体的版本以及镜像来源,这边是从淘宝下载的(需要配置,在后续会有讲解,如何配置)

打开项目目录下的package.json文件(如下),会多出一个dependencies(指的是你已经安装过的模块),可以看到,版本号前面多了一个^,(继续往下看)

关于模块版本号表示方式:

  • 指定版本号:比如3.5.2 ,只安装指定的版本,遵循“大版本.次要版本.小版本”的格式规定
  • ~波浪号+指定版本号:比如:~3.5.2,安装3.6.X的最新版本(不低于3.5.2),但是不安装3.6.X,也就是安装时不改变大版本号和次要版本号
  • ^插入号+指定版本号:比如:^3.5.2,安装3.x.x的最新版本(不低于3.5.2),但是不安装4.x.x,也就是说安装时不改变大版本号(注:如果大版本号是0,则插入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本变动,也可能带来程序的不兼容)
  • latest:安装最新版本

2)全局安装

将js库安装到全局目录(一般,通用模块下载到全局目录下面)

npm install <module name模块名称>[@版本号] -g

查看电脑的全局目录(默认在C盘)

npm root -g

考虑到C盘容量,可以更改全局目录的路劲

npm config set prefix "指定目录"
例如:

npm config set prefix "e:\npm"

注:迁移之后,在该目录下,会看不到npm这个文件夹,但是再执行npm root -g 就可以看到e下面有npm这个文件夹了。

具体安装方式,以及文件夹说明,同本地安装,区别就是命令不一样。

3)如果在安装时出现如下错误

npm err! Error: connect EconnREFUSED 127.0.0.1:8087

解决方法:执行如下命令,再重新执行安装命令即可(配置设置代理为空)

npm config set proxy null

4)查看全局安装的模块

npm list -g
或
npm ls -g

1.3.2 生产/开发环境模块安装

  • 生产:  --save 或 -S(s大写) 参数意思是把模块版本信息保存到 package.json 文件的dependencies 字段中(生产环境依赖)

       没有写--save或-s  默认也是安装到生产环境

npm install <模块名称> [--save|-S]

  • 开发:--save-dev 或 -D 参数意思是把模块版本信息保存到 package.json 文件的devDependencies 字段中(开发环境依赖)

npm install <模块名称> [--save-dev|-D]

例如:安装eslint 模块(语法校验模块),在开发环境即可。(注意要在项目目录下去安装)

npm install eslint -D

1.4 批量下载模块

别人提供的项目,一般不会有node_modules这个文件夹,只有package.json。只能通过这个文件去下载需要的依赖。例如:

1)打开命令窗口,到这个项目下,执行  npm install,就会根据pacjage.json去下载(下载时长根据需要下载的依赖多少会有变化)

2)npm ls 或者 npm list 查看本地当前已经下载的模块

1.5 查看模块命令

1)查看本地已经安装的模块方式

  • 直接在安装目录node_modules查看
  • 执行下面命令
npm ls
或
npm list
或查看指定模块
npm list <模块名称>

2)查看模块远程最新版本

npm view <模块名称> version

例:
npm view jquery version

3)查看远程模块所有版本

npm view <模块名称> versions

例:
npm view jquery versions

4)卸载模块

卸载局部模块(在项目目录下)
npm uninstall <模块名称>

卸载全局模块(随意路劲)
npm uninstall -g <模块名称>

5)配置淘宝镜像加速

  • 查看当前镜像地址
npm get registry

  • 配置淘宝镜像地址
npm config set registry https//registry.npm.taobao.org

  • 还原默认镜像地址
npm config set registry https//registry.npmnpmjs.org/

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章