vue全家桶进阶之路4:NPM、yarn、vite包安装
  z1U6f2N75fuC 2023年11月01日 50 0
Vue

  NPM(Node Package Manager)是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。

  NPM是 JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个 JavaScript 代码包可供下载,每周下载约 30 亿次。NPM让 JavaScript 开发人员可以轻松地安装、使用、共享、分发代码,管理项目依赖项目。NPM是Node.js的默认管理工具,所以在安装Node.js的时候就已经包含了NPM。

  Node.js是JavaScript运行环境,NPM是Node.js默认的包管理工具,所以安装了Node.js,NPM也就有了。

  1. 下载安装:Node.js 官网中文版:https://nodejs.org/zh-cn/
  2. 验证安装是否成功或查看版本:
    • 查看Node.js版本方法:node -v
    • 查看NPM的版本方法:npm -v
  3. 配置Node.js环境(NPM全局安装路径,可以自定义,按照默认设置也可以。)
    • 默认安装位置:c:\Users\用户名\AppData\Roaming\npm
    • 自定义位置:
      • 例如:node的安装路径为D:\Program Files\nodejs
      • 首先在node的安装目录下设置2个文件夹,node_global和node_cache
      • 全局路径cmd命令:npm config set prefix "D:\Program Files\nodejs\node_global"
      • 缓存路径cmd命令:npm config set cache"D:\Program Files\nodejs\node_cache"
      • 如果以上命令报错:npm ERR! `perfix` is not a valid npm option,需要降级版本,命令:npm install -g npm@^8
    • 设置环境变量
      • 目的:任何目录下都可以使用NPM命令。
      • 设置位置为:用户变量(当前用户可用)或系统变量(所有用户可用)
      • 设置环境变量:在系统变量下新建NODE_PATH,变量值设置为全局路径"D:\Program Files\nodejs
      • 编辑用户变量下的path,新建并输入全局路径:%NODE_PATH%和D:\Program Files\nodejs\node_global
  4. NPM初始化项目
    • 初始化动作在项目文件夹下进行,所以需要cmd进入到项目文件夹。例如:D:\BaiduSyncdisk\npm-demo1
    • 自定义参数初始化命令:npm init,然后按照提示操作,最后y确认。
    • 默认参数初始化命令:npm init -y,参数按照系统默认执行。
    • 初始化完成后,目录下会生成一个package.json文件。
    • 安装package.json两种的依赖包命令(此步骤取决于有无package里面有无设置依赖):npm install
  5. 安装模块(JS库)
    • 本地安装:npm install  模块名
      • @指明版本号:npm install bootstrap@3.4.1
      • ^次要版本和小版本最新,大版本不变,3是大版本,4是次要版本,1是小版本。
      • ~小版本最新,大版本和次要版本不变
      • latest 安装最近
    • 全局安装:npm install  模块名 -g
    • 本地安装针对本项目,全局安全共同使用 
    • 查看npm模块的全局安装位置:npm root -g
    •  

      查看所有全局安装的JS库:npm list -g 或者简写 npm ls -g

  6. 生产环境依赖和开发环境依赖的安装
    • 值得注意的是,依赖的安装是在项目下进行的,换言之,只有安装了依赖,你拿到的项目才能运行。
    • 生产环境依赖在package.json中的位置:dependencies,简称dep
      • 安装命令:npm install 模块名 --save, 或者npm install 模块名 --s,或者npm install 模块名 -S
    • 开发环境依赖在package.json中的位置:devdependencies,简称dev
      • 安装命令:npm install 模块名 --save-dev, 或者npm install 模块名 -D
  7. CNPM命令安装
    • npm 是从国外服务器下载安装
    • cnpm是从国内服务器安装
    • cnpm安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
    • cnpm安装成功后就可以使用cnpm install了

 

 

 

NPM命令大全:

1、设置npm路径
#全局安装路径
npm config set prefix "D:\Program Files\nodejs\node_global"
#缓存路径
npm config set cache "D:\Program Files\nodejs\node_cache"

2、设置镜像
#1,淘宝镜像源
npm config set registry https://registry.npmmirror.com
npm config set registry https://registry.npm.taobao.org

#2,腾讯云镜像源
npm config set registry http://mirrors.cloud.tencent.com/npm/

#3,华为云镜像源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

# 官方默认全局镜像
npm config set registry https://registry.npmjs.org

#检查当前镜像
npm config get registry

3、常用命令简写说明
-g: #--global 的缩写,表示安装到全局目录里
-S: #--save 的缩写,表示安装的包将写入package.json里面的dependencies
-D: #--save-dev 的缩写,表示将安装的包将写入packege.json里面的devDependencies
i: #install的缩写,表示安装

4、安装模块
npm init # npm 初始化当前目录
npm i # 安装所有依赖
npm install # 安装所有依赖
npm i express # 安装模块到默认dependencies
# 安装指定版本和临时源
npm install -g express@2.5.8 --registry=https://registry.npm.taobao.org

npm i express -g # 会安装到配置的全局目录下
npm i express -S # 安装包信息将加入到dependencies生产依赖
npm i express -D # 安装包信息将加入到devDependencies开发依赖

5、卸载模块
npm uninstall express # 卸载模块,但不卸载模块留在package.json中的对应信息
npm uninstall express -g # 卸载全局模块
npm uninstall express --save # 卸载模块,同时卸载留在package.json中dependencies下的信息
npm uninstall express --save-dev # 卸载模块,同时卸载留在package.json中devDependencies下的信息

6、更新模块
npm update express # 更新最新版本的express
npm update express@2.1.0 # 更新到指定版本号的express
npm update express@latest # 更新到最后的新版本

7、查看命令
npm -v #查看版本号
npm root # 查看项目中模块所在的目录
npm root -g # 查看全局安装的模块所在目录
npm list 或者 npm ls # 查看本地已安装模块的清单列表
npm view express dependencies # 查看某个包对于各种包的依赖关系
npm view express version # 查看express最新的版本号
npm view express versions # 查看所有express历史版本号(很实用)
npm view express # 查看最新的express版本的信息
npm info express # 查看express的详细信息,等同于上面的npm view express
npm list express 或 npm ls express # 查看本地已安装的express的详细信息
npm view express repository.url # 查看express包的来源地址

8、其他命令
npm cache clean # 清除npm的缓存
npm prune # 清除项目中没有被使用的包
npm outdated # 检查模块是否已经过时
npm repo express # 会打开默认浏览器跳转到github中express的页面
npm docs express # 会打开默认浏览器跳转到github中express的README.MD文件信息
npm home express # 会打开默认浏览器跳转到github中express的主页

9、通过使用淘宝定制的cnpm安装
npm install -g cnpm --registry=https://registry.npmmirror.com
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 查看版本号
cnpm -v

 

 

yarn的安装:npm i -g yarn

yarn安装vue:

yarn add vue@next

 

 

 

Vite安装:npm install -g create-vite

Vite被称作下一代前端开发与构建工具,是一个基于浏览器原生ES imports的开发服务器,利用浏览器去解析imports,在服务器端按需编译返回,直接跳过了打包环节,服务器随起随用,其热更新速度不会随着模块的增多而变慢,因此目前已经在前端社区逐步开始流行。Vite的优势非常明显,如果读者的项目预期非常庞大,笔者推荐直接使用Vite来构建,使用Vite要求Node版本大于12。
通过在终端运行以下命令,可以使用Vite快速构建Vue项目。

 

下面通过yarn命令直接创建使用Vite构建工具的Vue 3项目,默认yarn已经成功安装,后续依赖都采用yarn安装方式,读者也可选择自己喜欢的安装工具npm或pnpm等进行依赖的安装:

yarn create vite demo-site --template vue

 

Microsoft Windows [版本 10.0.19044.1766]
(c) Microsoft Corporation。保留所有权利。

C:\Users\liujun>npm i -g yarn

changed 1 package in 15s

 C:\Users\liujun>npm install -g create-vite

  added 1 package in 24s

C:\Users\liujun>yarn create vite demo-site --template vue
yarn create v1.22.19
warning package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@4.3.1" with binaries:
      - create-vite
      - cva
[##] 2/2
Scaffolding project in C:\Users\liujun\demo-site...

Done. Now run:

  cd demo-site
  yarn
  yarn dev

Done in 5.82s.
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...

C:\Users\liujun>cd D:\BaiduSyncdisk\vue3

C:\Users\liujun>d:

D:\BaiduSyncdisk\vue3>yarn create vite demo-site --template vue
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@4.3.1" with binaries:
      - create-vite
      - cva
[##] 2/2
Scaffolding project in D:\BaiduSyncdisk\vue3\demo-site...

Done. Now run:

  cd demo-site
  yarn
  yarn dev

Done in 7.11s.

D:\BaiduSyncdisk\vue3>cd demo-site

D:\BaiduSyncdisk\vue3\demo-site>yarn
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
info There appears to be trouble with your network connection. Retrying...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 1243.17s.

D:\BaiduSyncdisk\vue3\demo-site>yarn dev
yarn run v1.22.19
$ vite

  VITE v4.3.9  ready in 512 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

 

 

 

 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  gYl4rku9YpWY   2024年05月17日   57   0   0 Vue
  JZjRRktyDDvK   2024年05月02日   83   0   0 Vue
  VlNAKfyhjjp9   2024年04月30日   78   0   0 Vue
  JNTrZmaOQEcq   2024年04月30日   55   0   0 Vue
  onf2Mh1AWJAW   2024年05月17日   61   0   0 Vue
  3A8RnFxQCDqM   2024年05月17日   59   0   0 Vue
z1U6f2N75fuC