【前端】npm安装配置与Vue初始化（Windows）

✨Node.js

Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。

Node.js 由 OpenJS Foundation（原为 Node.js Foundation，已与 JS Foundation 合并）持有和维护，亦为 Linux 基金会的项目。

Node.js 采用 Google 开发的 V8 运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。

Node.js 大部分基本模块都用 JavaScript 语言编写。在 Node.js 出现之前，JavaScript 通常作为客户端程序设计语言使用，以JavaScript 写出的程序常在用户的浏览器上运行。Node.js 的出现使 JavaScript 也能用于服务端编程。Node.js 含有一系列内置模块，使得程序可以脱离 Apache HTTP Server 或 IIS，作为独立服务器运行。


官方网站：Node.js (nodejs.org)

中文官网：Node.js 中文网 (nodejs.cn)


✨npm

npm（全称 Node Package Manager，即“node包管理器”）是Node.js默认的、用JavaScript编写的软件包管理系统。


官方网站：npm (npmjs.com)

官方文档：npm Docs (npmjs.com)

中文文档：npm 中文文档 | npm 中文网 (npmjs.cn)


✨npm安装配置

下载

进入Node.js官网 Node.js (nodejs.org) 点击下载 Node.js (LTS)

LTS(Long Term Support) -> 长期支持版本

安装

运行下载得到的 node-v14.18.1-x64.msi

安装完成


查看是否安装成功


配置说明

npm配置将保存在 C:\Users\${username}\.npmrc 中

不配置global仓库的情况下默认安装在 C:\Users\${username}\AppData\Roaming\npm

下面介绍两种配置方式

  • 配置方式一（只修改镜像源 其余安装默认配置）
  • 配置方式二（配置global仓库与镜像源 配置相应环境变量）

两种方式各有优缺点：

  • 配置方式一：所有 node_modules 会默认安装在C盘（可能会占用C盘空间）
  • 配置方式二：修改了global仓库与环境变量，可以将global仓库位置配置在非C盘位置

！不建议将global仓库配置在nodejs安装目录下，否则后续操作都需要管理员权限


对于双硬盘笔记本（C盘固态其余机械）

建议将global仓库配置在C盘（或者不配置global仓库）


配置方式一（推荐）

更改npm镜像源

原淘宝npm镜像源：http://registry.npm.taobao.org

由于淘宝npm镜像源域名更新

镜像源应更改为如下命令行

npm config set registry=http://registry.npmmirror.com

查看配置信息

npm config list


配置方式二

配置global仓库

！不建议将global仓库配置在nodejs安装目录下，否则后续操作都需要管理员权限


运行如下命令在新建目录

mkdir D:\nodejs\node_global
mkdir D:\nodejs\node_cache

配置global仓库与缓存路径

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

更改镜像源

npm config set registry=http://registry.npm.taobao.org

查看配置信息

npm config list

如图配置完成。


配置环境变量

新增 系统环境变量

NODE_PATH

内容：D:\nodejs\node_global\node_modules（配置的global仓库下的node_modules）

修改 用户环境变量


✨Vue初始化

安装vue

npm install vue -g

-g 安装到global

！权限不足则使用管理器权限运行Terminal

安装vue-router

中文官网：Vue Router (vuejs.org)

npm install vue-router -g

安装vue-cli

中文官网：Vue CLI (vuejs.org)

npm install vue-cli -g


vue初始化

vue init <template-name> <project-name>

例如：

vue init webpack vue-test

后续选项根据需求自行选择

cd进入项目目录后

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

依次运行

npm install
npm run dev

根据提示打开 http://localhost:8080

初始化完成。


✨Vue CLI（2021.7.30 更新）

npm install vue-cli -g

上述命令安装的是vue-cli (1.x 或 2.x)

新版本vue-cli 安装及升级方式如下。


安装

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

升级

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

Vue CLI 官方文档

更多详细内容请阅读vue-cli官方文档

介绍 | Vue CLI (vuejs.org)


✨参考及引用

https://zh.wikipedia.org/wiki/Node.js

https://zh.wikipedia.org/wiki/Npm

https://www.cnblogs.com/lgx5/p/10732016.html

https://zhuanlan.zhihu.com/p/105715224

https://github.com/vuejs/vue-cli/tree/v2#vue-cli--


⭐转载请注明出处

本文作者：双份浓缩馥芮白

原文链接：https://www.cnblogs.com/Flat-White/p/15043437.html

版权所有，如需转载请注明出处。

posted @ 2021-07-22 11:51  双份浓缩馥芮白  阅读(398)  评论(0)  编辑  收藏  举报